:root {
    --bkgrd-body        : rgb(251, 251, 251)    ;
    --primary           : rgb(60, 193, 78)      ;
    --primary-dark      : rgb(54, 165, 69)      ;
    --secondary         : rgb(249, 155, 42)     ;
    --light-black       : rgb(73, 73, 73)       ;
    --light-grey-bkgrd  : rgb(218, 218, 218)    ;
    --input-border      : rgb(189, 189, 189)    ;
    --border-light-grey : rgb(220, 220, 220)    ;
    --max-width         : 1400px                  ;
    --min-width         : 360px                   ;
}



@font-face {font-family: 'DM-Sans'; src: url('DMSans.ttf');}


/* ================= Initialisation CSS ================= */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,  abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; border: 0; padding: 0; vertical-align: baseline;}

* {box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, main, hgroup, menu, nav, section, img, button {display: block;}
ol, ul {margin: 0 0 0 20px; padding:0;}
blockquote, q {quotes: none;}
blockquote:before, blockquote::after, q:before, q::after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}
/* ================= END Initialisation CSS ================= */


body {background-color: var(--bkgrd-body); margin: 0; padding: 0; min-width: var(--min-width);}
div, span, a, select, input, textarea, label, button, h1, h2, h3, h4, h5, h6, ul, ol, td, header, footer {font-family: 'DM-Sans', Arial, sans-serif; font-size: 14px; color: rgb(20, 20, 21);}
a {text-decoration: none;}
button:hover {cursor: pointer;}

.clear {clear: both;}
.hide {display: none;} /* rendered hidden, revealed by JS (the picture save / cancel buttons) */




/* ==================================================================== */
/*                          ALL DEVICES                                 */
/* ==================================================================== */

.lft100 { float: left; width: 100%; }
h3 { font-size: 18px; margin-bottom: 10px; font-weight: 600; }
.h3-subttl { float: left; width: 100%; margin: 0 0 18px; color: var(--light-black); }
h4 { font-size: 18px; font-weight: 600; float: left; }
h5 { font-size: 16px; margin-bottom: 10px; font-weight: 600; }
.box { float: left; width: 100%; background-color: white; border: 1px solid var(--border-light-grey); padding: 20px; border-radius: 6px; }
.link { color: var(--primary); font-weight: 500; }
.link:hover { color: var(--primary-dark); text-decoration: underline; }
.line { float: left; width: 100%; border-bottom: 1px solid lightgrey; margin: 20px auto; }
.pad-lr0 { padding-left: 0 !important; padding-right: 0 !important; }
.bold { font-weight: 600; }


/* ====================== No-JS gate ====================== */
#nojs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; background-color: white; text-align: center; }
#nojs img { width: 160px; margin-bottom: 30px; }
#nojs h1 { font-size: 22px; font-weight: 600; margin-bottom: 12px; }
#nojs p { max-width: 460px; line-height: 160%; color: var(--light-black); }


/* ====================== Header, Main, Footer ====================== */
header, footer { float: left; width: 100%; background-color: white; padding: 10px 0; min-height: 42px; }
header { border-bottom: 1px solid lightgrey; }
footer { padding: 20px 0 30px; }
footer * { font-size: 13px; }
.hdr-box, .ftr-box { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* Header left */
.hdr-left   { float: left; width: 200px; }
    #logo { float: left; width: 100%; margin-top: 4px; }

/* Header center */
.hdr-center { float: left; width: calc(100% - 444px); }
    .hdr-center * { width: 100%; text-align: center; }
    .hdr-post { color: var(--primary); text-decoration: underline; font-size: 18px; font-weight: 600; }
    .hdr-post:hover { color: var(--primary-dark); }

/* Header right */
.hdr-right  { float: right; width: 244px; }
    .flag { border-radius: 50%; width: 40px; height: 40px; padding: 10px; }
    .flag:hover { background-color: var(--light-grey-bkgrd); }
    .lang-btn { float: right; margin-right: 6px; padding: 0; border: none; background: transparent; } /* holds the .flag, opens #lang_popup */

/* Dropdown */
.dropdown { max-width: 198px; float: right; position: relative; }
.dropdown-btn { float: left; display: flex; align-items: center; width: 100%; padding: 11px 0; border: none; background: transparent; cursor: pointer; }
    .user-greet { min-width: 0; margin-right: 8px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* the one item that shrinks: a long name ellipses, the unread badge and the chevron stay in view */
    .dropdown-btn .nav-badge { flex: none; margin: 0 8px 0 0; }
    .dropdown-chevron { flex: none; width: 18px; height: 18px; object-fit: contain; }
.dropdown-content { display: none; border: 1px solid lightgrey; position: absolute; top: 40px; right: 0; width: 230px; background-color: white; padding: 20px 10px; border-radius: 10px; z-index: 1; box-shadow: 0 2px 7px #00000026,0px 5px 17px #0003 }
    .dropdown-profile { padding: 6px 10px; float: left; width: 100%; margin-bottom: 4px; border-radius: 4px; }
    .dropdown-image { float: left; height: 50px; width: 50px; border-radius: 50%; object-fit: cover; margin-right: 14px; }
    .dropdown-profile-txt { float: left; width: calc(100% - 64px); padding: 6px 0; }
    .dropdown-name { float: left; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 600; }
    .dropdown-line { float: left; width: 100%; padding: 6px 10px; margin-top: 2px; border-radius: 2px; }
    .dropdown-profile:hover, .dropdown-line:hover { background-color: #efefef; }
    .nav-badge { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0px 6px; border-radius: 10px; background-color: var(--secondary); color: white; font-size: 12px; line-height: 18px; text-align: center; } /* unread count, on the Messages entry and the name button of either nav */
    .dropdown-line .nav-badge { float: right; margin-left: 0; } /* a dropdown line is full width, so the count sits at its far end rather than against the label */
.dropdown-btn:hover + .dropdown-content, .dropdown-btn:focus + .dropdown-content, .dropdown-content:hover  { display: unset; }


/* ====================== Articles (Terms of use, Privacy...) ====================== */
.table-of-content { margin: 0 0 10px 0; padding-left: 20px; line-height: 150%; }
.table-of-content li { margin-bottom: 4px; }
.article-section { margin-top: 26px; line-height: 150%; }
.article-section h5 { margin-bottom: 8px; }
.article-section p { margin: 6px 0; }
.article-list { padding-left: 20px; margin: 6px 0; }
.article-list li { margin-bottom: 6px; }


/* ====================== Body / layouts ====================== */
#container { max-width: var(--max-width); margin: 0 auto; padding: 30px 0; min-height: calc(100vh - 50px); overflow: auto; }

/* Sidebars */
.sdbar1, .sdbar2, .sdbar3, .sdbar4 { padding: 0 20px; float: left; }
.sdbar1 { width: 370px; } /* sidebar main */
.sdbar2 { width: 300px; } /* sidebar ads */
.sdbar3 { width: 350px; } /* sidebar ad */
.sdbar4 { width: 270px; } /* sidebar myaccount */
    
/* Main children */
.main0-s { margin: 0 auto; width: 100%; padding: 0 20px; max-width: 500px; }
.main0-m { margin: 0 auto; width: 100%; padding: 0 20px; max-width: 860px; }
.main0-l { margin: 0 auto; width: 100%; padding: 0 20px; } /* msg */
.main1, .main2, .main3, .main4 { padding: 0 20px; float: left; }
.main1 { width: calc(100% - 370px); }
.main2 { width: calc(100% - 300px); max-width: 900px; }
.main3 { width: calc(100% - 350px); }
.main4 { width: calc(100% - 270px); max-width: 900px; }



/* ====================== Search / Filters ====================== */

/* Search */
.search-input  { float: left; width: calc(100% - 332px); margin-right: 6px; }
.search-select { float: left; width: 200px; margin-right: 6px; }
.search-btn    { float: right; width: 120px; }

/* Results count */
.ads-results { float: left; }
.adcount { float: left; width: 100%; font-weight: 500; font-size: 15px; line-height: 150%; }
.results-no { float: left; width: 100%; color: #888; }

/* Gallery / List view */
.lv-gv-btns { float: right; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 14px 0; }
#lv_btn, #gv_btn { background-color: var(--bkgrd-body); border: none; opacity: 0.5; padding: 0; transition: 0.2s; height: 24px; width: 24px; }
#lv_btn:hover, #gv_btn:hover { opacity: 1; }
.lv-gv-btn-active { opacity: 1 !important; } /* the view currently on, kept in sync by setAdsView() */
#lv_btn img, #gv_btn img { height: 100%; width: 100%; }
.show-filters { display: none; }

/* Sidebar filters */
.sdbar-cat, .sdbar-subcat { float: left; width: 100%; color: var(--primary); line-height: 150%; }
.sdbar-cat:hover, .sdbar-subcat:hover { color: var(--primary-dark); cursor: pointer; }
.sdbar-cat-selected { float: left; width: 100%; line-height: 150%; position: relative; padding: 4px 0; }
.sdbar-cat-selected::after { position: absolute; right: 4px; top: 6px; content: url('../public/images/tick.svg'); }
.sdbar-subcat { margin-left: 16px; width: calc(100% - 16px); }

/* Sidebar filters - Ads */
.price-filter, .date-filter { float: left; width: 48%; position: relative; }
.price-filter input { width: 100%; padding-right: 36px !important; }
.price-filter-sign { position: absolute; right: 8px; top: 10px; color: #828282; font-size: 14px; opacity: 90%;  }

/* Sidebar filters - Events */
.date-input { float: left; width: 100%; padding-right: 28px !important; cursor: pointer; }
.date-clear { position: absolute; right: 10px; top: 9px; width: 18px; height: 18px; line-height: 18px; text-align: center; color: #828282; cursor: pointer; font-size: 13px; }
.date-clear:hover { color: var(--light-black); }



/* ====================== Buttons ====================== */

/* btn float left  */ .cal-btn1, .cal-btn2, .filter-btn, .firstmsg-btn, .log-btn2, .reg-btn2, .reg-btn3, .postad-btn1, .see-ads-btn2, .popup-btn1, .popup-btn2, .edit-btn1, .edit-btn2, .renew-btn, .delete-btn, .modif-img-btn, .cancel-img-btn, .drop-img-btn, .delete-accnt-btn1, .delete-accnt-btn2, .confrmtn-btn1, .confrmtn-btn2, .logout-btn { float: left; }
/* btn float right */ .reg-btn, .log-btn, .submit-btn { float: right; }

/* btn primary   */ .reg-btn, .search-btn, .cal-btn1, .filter-btn, .firstmsg-btn, .log-btn2, .reg-btn2, .postad-btn1, .popup-btn1, .edit-btn1, .edit-btn2, .renew-btn, .see-ads-btn1, .submit-btn, .delete-accnt-btn1, .confrmtn-btn1, .reset-btn, .loc-ok { background-color: var(--primary); border: 1px solid var(--primary); color: white; font-weight: 500; }
/* btn secondary */ .log-btn, .cal-btn2, .reg-btn3, .popup-btn2, .delete-btn, .postad-btn2, .see-ads-btn2, .modif-img-btn, .delete-accnt-btn2, .confrmtn-btn2, .logout-btn { background-color: white; border: 1px solid var(--border-light-grey); font-weight: 500; }
/* btn third */     .cancel-img-btn, .drop-img-btn { background-color: transparent; border: 1px solid transparent; font-weight: 500; color: var(--light-black); }

/* btn large */ .reg-btn, .log-btn, .cal-btn1, .cal-btn2, .filter-btn, .firstmsg-btn, .log-btn2, .reg-btn2, .reg-btn3, .postad-btn1, .popup-btn1, .popup-btn2, .edit-btn1, .edit-btn2, .renew-btn, .delete-btn, .see-ads-btn1, .postad-btn2, .see-ads-btn2, .submit-btn, .modif-img-btn, .cancel-img-btn, .drop-img-btn, .delete-accnt-btn1, .delete-accnt-btn2, .confrmtn-btn1, .confrmtn-btn2, .logout-btn, .reset-btn { padding: 10px 14px; border-radius: 6px; }
/* btn small */ .search-btn { padding: 8px 14px; border-radius: 6px; }

/* btn center */ .cal-btn1, .cal-btn2, .filter-btn, .firstmsg-btn, .log-btn2, .reg-btn2, .reg-btn3, .postad-btn1, .see-ads-btn2, .popup-btn1, .popup-btn2, .edit-btn1, .edit-btn2, .renew-btn, .delete-btn, .delete-accnt-btn1, .delete-accnt-btn2 { width: 100%; text-align: center; }


/* btn primary:hover   */ .reg-btn:hover, .search-btn:hover, .cal-btn1:hover, .filter-btn:hover, .firstmsg-btn:hover, .log-btn2:hover, .reg-btn2:hover, .postad-btn1:hover, .popup-btn1:hover, .edit-btn1:hover, .edit-btn2:hover, .renew-btn:hover, .see-ads-btn1:hover, .submit-btn:hover, .delete-accnt-btn1:hover, .confrmtn-btn1:hover, .reset-btn:hover, .loc-ok:hover { background-color: var(--primary-dark); border: 1px solid var(--primary-dark); cursor: pointer; }
/* btn secondary:hover */ .log-btn:hover, .cal-btn2:hover, .reg-btn3:hover, .popup-btn2:hover, .delete-btn:hover, .postad-btn2:hover, .see-ads-btn2:hover, .modif-img-btn:hover, .cancel-img-btn:hover, .drop-img-btn:hover, .delete-accnt-btn2:hover, .confrmtn-btn2:hover, .logout-btn:hover { background-color: #f5f5f5; cursor: pointer; }
/* btn secondary:hover */ .cancel-img-btn:hover { background-color: var(--light-grey-bkgrd); cursor: pointer; }

/* margin-top */ .edit-btn2, .delete-btn, .submit-btn, .modif-img-btn, .cancel-img-btn, .drop-img-btn, .delete-accnt-btn2, .popup-btn2, .see-ads-btn2 { margin-top: 10px; }
/* margin-right */ .modif-img-btn, .confrmtn-btn1 { margin-right: 6px; }
/* inline and centered */ .see-ads-btn1, .postad-btn2, .reset-btn { display: inline-block; margin: 0 6px; }


/* ====================== Inputs & Forms ====================== */
input[type="text"], input[type="password"], select, textarea { background-color: white; border: 1px solid var(--border-light-grey); padding: 8px 10px; border-radius: 4px; }
input[type="text"], input[type="password"], select, .search-btn { height: 36px; }
.form-row     { margin-top: 20px; float: left;  width: 100%; }
.form-row-lft { margin-top: 20px; float: left;  width: 48%;  }
.form-row-rgt { margin-top: 20px; float: right; width: 48%;  }
.addr-zip     { float: left;  width: 35%; }
.addr-city    { float: right; width: 63%; }
.radio-group { position: relative; float: left;  cursor: pointer; }
.radio-group input[type="radio"], .radio-group input[type="checkbox"] { position: absolute; left: 4px; }
.radio-group label { padding: 0 6px 0 28px; }

.lbl { font-weight: 500; width: 100%; float: left; margin-bottom: 6px; }
.input-err { float: left; width: 100%; margin: 4px 0; color: red; }
.eye-pwd { position: absolute; right: 14px; top: 8px; width: 22px; height: 22px; cursor: pointer; opacity: 80%; }
.eye-pwd:hover { opacity: 100%; }

.inputs-disabled { opacity: 0.5; cursor: unset; pointer-events: none; }
.submit-lock { background-color: var(--primary-dark); border-color: var(--primary-dark); pointer-events: none; cursor: default; }
.popup-btn2.submit-lock { background-color: white; border-color: var(--border-light-grey); } /* a secondary button stays white */
.submit-spinner { display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: inherit; vertical-align: middle; animation: submit-spin 0.8s linear infinite; } /* inherit: every span is set near-black at the top */
.popup-btn2 .submit-spinner { color: var(--light-black); }
@keyframes submit-spin { to { transform: rotate(360deg); } }


/* ====================== Ads / Events ====================== */
.adbox { position: relative; } /* width to be updated with JS slider */
.adbox-big { position: relative; float: left; width: 100%; padding: 20px; background-color: white; border: 1px solid var(--border-light-grey); border-radius: 10px; margin-bottom: 20px; }
/* The heart is a background, not an <img>: lighter on a 24-card listing, and its state is one class the JS toggles.
   Separate background-* properties, never the shorthand: :hover and .fav-btn-active each override ONE of them. */
.fav-btn { position: absolute; top: 10px; right: 10px; background-color: white; background-image: url('../public/images/heart.svg'); background-size: 20px 20px; background-position: center; background-repeat: no-repeat; opacity: 0.8; border-radius: 50%; border: none; transition: 0.1s; height: 36px; width: 36px; }
    .fav-btn:hover { background-color: var(--light-grey-bkgrd); opacity: 1; }
    .fav-btn-active { background-image: url('../public/images/heart-red.svg'); } /* after .fav-btn: same specificity, so source order decides */

.adbox-child { float: left; width: 100%; }
.lv .adbox-child { padding: 20px; background-color: white; border: 1px solid lightgrey; border-radius: 10px; }
.adbox-child:hover .ad-title1 { text-decoration: underline; }
    .img-frame1 { float: left; width: 100%; margin-bottom: 10px; background-color: rgb(242, 242, 242); border-radius: 6px; overflow: hidden; }
    .lv .img-frame1 { width: 270px; height: 270px; margin-right: 20px; margin-bottom: 0; }
    .img-frame2 { float: left; width: 100%; background-color: rgb(242, 242, 242); border-radius: 10px; aspect-ratio: 5 / 3; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; position: relative; }
    .img-frame3 { float: left; width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; cursor: pointer; }
    .ad-img1 { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
    #ad_img2 { width: 100%; height: 100%; object-fit: contain; }
    .ad-img3 { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
    .ad-txt1 { float: left; width: 100%; }
    .ad-title1 { float: left; width: calc(100% - 30px); font-weight: 500; max-height: 36px; overflow: hidden; }
    .gv .ad-title1 { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
    .ad-title2 { float: left; width: calc(100% - 30px); font-weight: 500; font-size: 18px; margin-bottom: 6px; }
    /* nowrap: displayPrice() returns "1 500 $" with real spaces (fr thousands separator + the space before the sign), which would otherwise break across two lines */
    .ad-price1 { float: left; width: 100%; font-weight: 600; font-size: 15px; white-space: nowrap; }
    .ad-price2 { float: left; width: 100%; font-weight: 600; font-size: 20px; white-space: nowrap; }
    .ad-descrptn1 { display: none; }
    .ad-descrptn2 { float: left; width: 100%; max-width: 600px; line-height: 160%; color: var(--light-black); }

.ads, .ads.gv { float: left; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 20px; margin: 30px auto; }
.ads.lv { grid-template-columns: 1fr; gap: 20px; }

.lv .ad-txt1 { width: calc(100% - 290px); }
.lv .ad-descrptn1 { display: unset; float: left; width: 100%; line-height: 130%; margin-top: 20px; color: var(--light-black); max-height: 56px; overflow: hidden; }

/* No result (shared empty state: ads, events, favourites...) */
.no-results { max-width: 480px; margin: 40px auto; text-align: center; line-height: 150%; }
.no-results img { margin: 0 auto 20px; width: 120px; object-fit: contain; }
.no-results-chips { float: left; width: 100%; margin: 20px 0; }
.no-results-chip { display: inline-block; margin: 0 4px 8px; padding: 6px 12px; background-color: white; border: 1px solid var(--border-light-grey); border-radius: 20px; color: var(--light-black); font-weight: 500; white-space: nowrap; } /* nowrap: displayPrice() returns "1 500 $" with real spaces, which would otherwise break inside the chip */
.no-results-chip:hover { background-color: #f5f5f5; border-color: var(--input-border); }



/* ====================== Ad / Event ====================== */
/* Slider & Thumbnails */
.slider { float: left; width: 100%; margin: 20px 0 40px; }
.slider-arrow { top: 50%; } /* Other properties of .slider-arrow class in 'Carrousel' section */
.thumbnails { float: left; width: 100%; margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.img-frame3.img-selected, .img-frame3:hover { border: 2px solid black; padding: 4px; }

/* Breadcrumb */
.breadcrumb { float: left; width: 100%; padding: 0 20px; font-weight: 500; margin-bottom: 20px; }
.breadcrumb a:hover, .see-more:hover { color: #333; text-decoration: underline; }
.see-more-ctnr { float: left; width: 100%; margin-top: 30px; }
.see-more { float: right; font-weight: 500; margin-top: 2px; }

/* Report & Errors */
.report-btn { float: left; background-color: transparent; border: transparent; font-weight: 500; color: #333; text-decoration: underline; }
.report-done { float: left; width: 100%; color: var(--light-black); line-height: 140%; } /* replaces .report-btn once the visitor has reported: same spot, quieter */
.ad-status-banner { float: left; width: calc(100% - 30px); margin-top: 14px; padding: 12px 14px; border-radius: 6px; background-color: rgb(255, 244, 229); border: 1px solid var(--secondary); color: var(--light-black); line-height: 140%; }

/* Event */
.ev-loc, .ev-date { float: left; width: 100%; margin-top: 10px; padding-left: 26px; position: relative; line-height: 130%; }
.ev-loc-icon { position: absolute; width: 16px; height: 16px; top: 2px; left: 0; opacity: 70%; }

/* Ads / Events suggestions */
.gv-suggestions { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; margin-top: 20px !important; }


/* ====================== Ad / Event viewer ====================== */
.overlay, .overlay2 { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; }
.overlay2 { background-color: rgba(0, 0, 0, 0.5); }
.overlay.viewer-open { display: flex; }
.viewer-img { max-width: 90%; max-height: 90%; object-fit: contain; border-radius: 6px; }
.viewer-arrow { width: 50px; height: 50px; font-size: 26px; }
.viewer-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, 1); opacity: 0.8; font-size: 22px; text-align: center; cursor: pointer; }
.viewer-close:hover, .viewer-arrow:hover { opacity: 1; }



/* ====================== Ad / Event sidebar ====================== */
/* Avatar */
.avatar-frame1 { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; margin-right: 14px; float: left; }
.avatar-frame2 { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin-right: 20px; float: left; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* Text information & first message */
.fname { float: left; width: 100%; font-size: 16px; font-weight: 500; margin: 10px 0 6px; }
.fname2 { float: left; width: 100%; font-size: 14px; color: var(--light-black); margin-bottom: 6px; }
.pro-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; background-color: white; border: 1px solid var(--border-light-grey); border-radius: 3px; font-size: 11px; font-weight: 600; line-height: 15px; color: var(--light-black); }
.first-msg-input { float: left; width: 100%; resize: none; margin-bottom: 6px; }
.msg-preview-box { float: left; width: 100%; padding: 20px; background-color: #efefef; border-radius: 6px; margin-bottom: 10px; } /* the margin clears the "see the full conversation" button below it */
.msg-preview { float: left; width: 100%; line-height: 1.4; margin-top: 8px; max-height: 80px; overflow: hidden; }



/* ====================== Ad / Event posted ====================== */
.box-green { float: left; width: 100%; background-color: lightgreen; padding: 30px; border-radius: 10px; margin-bottom: 20px; }


/* ====================== Banners ====================== */
.banner-home, .banner-home-s { float:left; width: 100%; border-radius: 6px; margin-bottom: 10px; aspect-ratio: 2 / 1; object-fit: cover; }
.banner-home-s { margin-bottom: 20px; aspect-ratio: 4 / 1; }
.banner-ad1 { float: left; width: 100%; aspect-ratio: 8 / 1; margin: 30px 0; border-radius: 10px; background-color: rgb(148, 245, 188); color: rgb(47, 49, 55); padding: 30px; }
    .banner-ttl { font-size: 18px; font-weight: 600; }
    .banner-btn { background-color: var(--primary); color: #fff; padding: 6px 10px; float: left; margin-top: 6px; border-radius: 20px; font-size: 13px; font-weight: 500; }


/* ====================== Calendar ====================== */
/* Calendar main */
.cal-head, .cal-btm { float: left; width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal-btm { border: 1px solid var(--border-light-grey); border-radius: 6px; overflow: hidden; }
.cal-head div { padding: 10px; font-weight: 600; }
.cal-day { border: 1px solid var(--border-light-grey); padding: 10px 0; cursor: pointer; }
.cal-day:hover { background-color: rgb(238, 241, 244); }
.date-greyedout, .date-greyedout:hover { color: #b1b1b1 !important; cursor: default !important; background-color: transparent !important; border: 1px solid var(--border-light-grey) !important; font-weight: 400 !important; }

/* Calendar nav - shared by the date popup and the homepage sidebar calendar */
.cal-nav { float: left; width: 100%; }
.cal-arrow { width: 36px; height: 36px; border: none; background-color: white; font-size: 32px; line-height: 1; border-radius: 50%; }
.cal-arrow-lft { float: left; }
.cal-arrow-rgt { float: right; }
.cal-arrow:hover { background-color: #f5f5f5; }
.cal-arrow-disabled { color: var(--input-border); cursor: default; }
.cal-arrow-disabled:hover { background-color: white; }
.cal-selects { float: left; width: calc(100% - 92px); margin: 0 10px; }
.cal-today { float: left; width: 100%; margin-top: 8px; font-size: 13px; text-decoration: underline; cursor: pointer; }
.cal-selected, .cal-date-active, .popup .cal-day:hover { background-color: var(--primary); border-color: var(--primary); color: white; font-weight: 600; }
.cal-range { background-color: #cbf8d0; }



/* ====================== Carrousel ====================== */
.carrousel-container { position: relative; width: 100%; padding: 0 20px 10px; overflow: hidden; cursor: grab; }
.carrousel-track { display: grid; grid-auto-flow: column; gap: 20px; }
.carrousel-arrow, .slider-arrow { position: absolute; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 1); opacity: 0.8; border: none; font-size: 22px; text-align: center; }
.carrousel-arrow { top: calc(50% - 10px); }


/* ====================== Delete Account ====================== */
/* Dropup holding the delete-account link - same open-on-hover-or-focus rule as the header dropdown */
.three-dots         { float: left; position: relative; margin-left: 8px; }
.three-dots-btn     { padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--light-black); font-size: 18px; line-height: 17px; letter-spacing: 2px; } /* the line-height + transparent border match the height of .logout-btn beside it */
.three-dots-btn:hover { background-color: #f5f5f5; }
.three-dots-content { display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; width: 210px; background-color: white; border: 1px solid lightgrey; padding: 10px; border-radius: 10px; box-shadow: 0 2px 7px #00000026, 0 5px 17px #0003; z-index: 1; }
.three-dots-btn:hover + .three-dots-content, .three-dots-btn:focus + .three-dots-content, .three-dots-content:hover { display: unset; }


/* ====================== Edit Ad / Event ====================== */
.editad-modif     { color: var(--primary); cursor: pointer; text-decoration: underline; }
#cat_popup .popup, #loc_popup .popup { max-width: 640px; width: 92%; } /* the two-column pickers need more room than a standard popup */
#cat_popup .post-subcat        { cursor: pointer; } /* edit ad + edit event forms */
#cat_popup .post-subcat-active { color: var(--primary); font-weight: bold; }

/* ====================== Location picker ====================== */
/* The category popup's two columns (.post-cats / .post-subcats), with buttons for rows. loc_field.php + loc_popup.php */
.loc-field { display: contents; } /* a wrapper for the DOM only: the button sits in its row exactly as the select it replaces did */
.loc-btn { position: relative; height: 36px; padding: 8px 30px 8px 10px; background-color: white; border: 1px solid var(--border-light-grey); border-radius: 4px; text-align: left; cursor: pointer; }
.loc-btn:disabled { cursor: default; color: #999; } /* an online event: no address */
.loc-txt { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* a long city name ends in ... instead of wrapping */
.loc-chevron { position: absolute; right: 10px; top: 50%; width: 12px; transform: translateY(-50%); }
.loc-note { float: left; width: 100%; margin-top: 6px; padding-left: 8px; border-left: 3px solid var(--secondary); font-size: 13px; line-height: 140%; }
#loc_popup { z-index: 1001; } /* above the phone filters popup it opens from */
#loc_popup .post-cats, #loc_popup .post-subcats.post-cat-active { max-height: 55vh; overflow-y: auto; } /* 55 countries, up to 48 cities */
#loc_popup .post-cat { padding-left: 16px; } /* no icon, unlike a category */
#loc_popup .post-subcat { width: 100%; border: none; background-color: white; text-align: left; cursor: pointer; }
#loc_popup .post-subcat:nth-child(2n) { background-color: #f5f5f5; }
.loc-all { width: 100%; margin-bottom: 8px; padding: 12px 16px; border-radius: 6px; background-color: white; border: 1px solid var(--border-light-grey); text-align: left; cursor: pointer; }
.loc-all, .loc-whole, .loc-other { color: var(--primary); font-weight: 600; }
.loc-new { padding: 10px 16px; border-top: 1px solid var(--border-light-grey); overflow: hidden; }
.loc-new input { float: left; width: calc(100% - 70px); }
.loc-ok { float: right; width: 60px; height: 36px; border-radius: 4px; }
.loc-new-err { float: left; width: 100%; margin-top: 4px; color: red; }


/* ====================== Error pages ====================== */
/* 403, 404 and the unavailable ad / event: a picture, a heading, a line of text and two buttons, centred */
.err-box { text-align: center; margin-top: 70px; margin-bottom: 90px; } /* after .main0-s, which it sits beside: its margins win */
.err-box > svg, .err-box > img { display: block; margin: 0 auto 14px; }
.err-box h3 { margin-top: 8px; }
.err-box p { color: var(--light-black); margin-top: 10px; }
.err-btns { margin-top: 26px; }
.err-btns .confrmtn-btn1, .err-btns .confrmtn-btn2 { float: none; display: inline-block; margin-bottom: 8px; }


/* ====== Help / FAQ (inline until reviewed) ====== */
.faq-item        { float: left; width: 100%; margin-bottom: 8px; }
.faq-q           { padding-left: 20px; }                                     /* no cat-icon, so trim the left padding of .collapsible */
.faq-answer      { float: left; width: 100%; max-height: 0; overflow: hidden; border: 1px solid transparent; border-radius: 6px; } /* border stays 1px (transparent) so scrollHeight is stable */
.active-collapse + .faq-answer { background-color: white; border-color: var(--border-light-grey); }
.faq-answer-inner { float: left; width: 100%; padding: 14px 20px; color: var(--light-black); line-height: 1.5; }


/* ====================== Main page ====================== */
/* Categories columns & Subcategories */
.cat-col { float: left; width: calc(33% - 12px); margin-right: 20px; }
.cat-col:nth-of-type(3n) { float: right; margin-right: 0; }
.cat-dropdown { float: left; width: 100%; margin-bottom: 8px; }
/* .cat-link = the hardcoded "Dons" tile: same box, but it IS the link and it drops nothing down, so no '+' */
.collapsible, .cat-link { float: left; width: 100%; position: relative; padding: 12px 30px 12px 46px; border-radius: 6px; background-color: white; border: 1px solid var(--border-light-grey); cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.5s; }
.collapsible:hover, .cat-link:hover { background-color: rgb(238, 241, 244); }
.collapsible::after { position: absolute; right: 10px; top: 0; content: '\002B'; font-weight: 400; color: #333333; font-size: 30px; opacity: 90%; }
.collapsible.active-collapse { background-color: #efefef; }
.collapsible.active-collapse::after { content: "\2212"; }
.collapsible a, .cat-link { max-width: 100%; white-space: nowrap; overflow: hidden; } /* Prevent the text from wrapping, when the text is longer than the box */
.collapsible a { float: left; }
.collapsible a:hover, .cat-link:hover, .home-subcat:hover { text-decoration: underline; }
.cat-icon { position: absolute; top: 10px; left: 12px; height: 22px; width: 22px; }
.home-subcats { float: left; width: 100%; max-height: 0; overflow: hidden; background-color: transparent; border-radius: 6px; border: 1px solid transparent; } 
.active-collapse + .home-subcats { background-color: white; max-height: 1500px; border: 1px solid var(--border-light-grey); cursor: pointer; }
.home-subcat { float: left; width: 100%; padding: 10px 16px; }
.home-subcats a:nth-of-type(2n-1) .home-subcat { background-color: #ffffff; }
.home-subcats a:nth-of-type(2n) .home-subcat { background-color: #f5f5f5; }



/* ====================== Messages ====================== */
.sdbar-msg, .msg-main { height: calc(100vh - 180px); min-height: 400px; background-color: white; }
.sdbar-msg { float: left; width: 400px; padding-right: 20px; border-right: 1px solid var(--border-light-grey); }
.msg-main { float: left; width: calc(100% - 400px); padding-left: 20px; display: flex; flex-direction: column; }

/* Action buttons (delete, mark as read, mark as unread), enabled when at least one conv is selected */
.convs-btns { float: right; margin-bottom: 10px; }
    .convs-btn  { float: left; width: 44px; height: 44px; border-radius: 50%; border: none; background-color: #efefef; opacity: 0.4; cursor: not-allowed !important; margin-right: 6px; }
    .convs-btn-img, .msg-btn-img { margin: 0 auto; }
    .convs-btns-active .convs-btn { opacity: 1; cursor: pointer !important; }
    .convs-btns-active .convs-btn:hover { background-color: #d6d6d6; }

/* The form wraps the buttons and the list, so the list's height resolves against it */
.convs-form { float: left; width: 100%; height: 100%; }

/* Filter row, on its own line above the action buttons */
.convs-filters { float: left; margin-bottom: 10px; }
    .convs-filter { float: left; padding: 8px 14px; margin-right: 8px; border-radius: 18px; background-color: #efefef; color: var(--light-black); font-size: 14px; }
    .convs-filter:hover { background-color: #d6d6d6; }
    .convs-filter-active { background-color: var(--primary); color: white; }
    .convs-filter-active:hover { background-color: var(--primary-dark); }

/* Conversations list */
.convs { float: left; width: 100%; height: calc(100% - 104px); overflow-y: auto; } /* 60px for the action buttons + 44px for the filter row */
.conv { float: left; width: 100%; padding: 12px 10px; border-radius: 6px; }
.conv:hover, .conv-active { background-color: #efefef; }
.conv-check { float: left; margin: 17px 10px 0 0; }
.conv-content { float: left; width: calc(100% - 26px); }
    .conv-thumb { float: left; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background-color: rgb(242, 242, 242); margin-right: 12px; } /* the img inside reuses .ad-img1 */
    .conv-txt { float: left; width: calc(100% - 60px); }
        .conv-fname { float: left; font-weight: 600; }
        .conv-dt { float: right; color: #888; font-size: 12px; }
        .conv-adtitle, .conv-preview { float: left; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
        .conv-adtitle { color: var(--light-black); font-size: 13px; }
        .conv-preview { margin-top: 2px; color: #888; }
    .conv-unread .conv-txt { font-weight: 600; } /* dt, ad title and preview inherit the bold; the fname is already bold */
    /* Unread dot, at the right of the preview line. Same orange as the nav count, so the two read as one signal */
    .conv-badge { float: right; width: 10px; height: 10px; margin: 7px 2px 0 6px; border-radius: 50%; background-color: var(--secondary); }
    .conv-unread .conv-preview { width: calc(100% - 18px); } /* the dot renders on unread rows only, and a 100%-wide preview would push it off the line */
.convs-empty { float: left; width: 100%; padding: 12px 10px; color: #888; }
.convs-more { float: left; width: 100%; padding: 12px 10px; text-align: center; color: var(--primary); font-weight: 600; }
.convs-more:hover { text-decoration: underline; }

/* Ad preview box (thread header) */
.msg-head { padding: 10px; border-radius: 10px; background-color: #efefef; } /* flex: 0 1 auto, by default*/
    .msg-backarrow      { display: none; float: left; font-size: 24px; font-weight: 500; line-height: 60px; padding: 0 14px 0 4px; color: var(--light-black); }
    .msg-head-txt       { float: left; width: calc(100% - 60px); padding-top: 4px; }
    .msg-head-fname     { float: left; width: 100%; font-weight: 600; }
    .msg-head-ad        { float: left; width: 100%; margin-top: 2px; color: #888; }
    .msg-head-ad:hover  { color: var(--light-black); text-decoration: underline; }

/* Message thread. Each date sits outside its bubble: left after a received message, right after a sent one */
.msg-bubbles { flex: 1 1 auto; overflow-y: auto; padding: 20px 4px; } /* flex:1 1 auto = item role: .msg-main is a flex column, this fills the space between header and reply bar. The bubbles inside are plain block/float */
    .msg-bubble     { clear: both; float: left; max-width: 70%; background-color: white; border: 1px solid grey; padding: 10px 14px; border-radius: 12px 12px 12px 2px; line-height: 1.4; white-space: pre-line; line-break: normal; } /* clear:both puts each bubble on its own line; float:left = received */
    .msg-bubble-me  { float: right; background-color: var(--primary); border: 1px solid var(--primary); color: white; border-radius: 12px 12px 2px 12px; } /* sent bubble to the right */
    .msg-bubble-dt  { clear: both; float: left; font-size: 11px; color: #888; margin: 4px 4px 12px; } /* date under a received bubble */
    .msg-bubble-me + .msg-bubble-dt { float: right; } /* date under a sent bubble */

/* Reply bar. The input grows with the text (JS): 40px for 1 line (9+20+9 padding/line + 2 borders), +20px per line, 200px max */
.msg-reply { display: flex; gap: 10px; align-items: flex-end; padding: 12px 0; } /* flex: 0 1 auto, by default*/
    .msg-input      { flex: 1 1 auto; height: 40px; max-height: 200px; line-height: 20px; padding: 9px 16px; resize: none; overflow-y: auto; border-radius: 20px; }
    .msg-btn        { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: none; background-color: var(--light-grey-bkgrd); cursor: default; }
    .msg-btn-active { background-color: var(--primary); cursor: pointer; }
    .msg-btn-active:hover { background-color: var(--primary-dark); }

/* Empty states (no conversation selected / never had a conversation) */
.msg-select, .msg-never { text-align: center; line-height: 150%; }
.msg-select { margin: 14vh auto; color: #888; }
.msg-never  { margin: 0 auto; max-width: 480px; padding: 60px 20px; }
.msg-select img, .msg-never img { margin: 0 auto 20px; width: 120px; object-fit: contain; }



/* ====================== Navigation ====================== */
/* Profile top nav */
.nav { float: left; width: calc(100% - 40px); margin: 0 20px 30px; }
.nav-item { float: left; text-align: center; padding: 10px; border-bottom: 1px solid lightgrey; margin-right: 10px }
.nav-active, .nav-item:hover { font-weight: 600; border-bottom: 2px solid grey; }

/* Profile sidebar */
.profile-sidenav { background-color: #efefef; border-radius: 10px; padding: 14px 20px; }
.sidenav-item { padding: 6px 0; }
.sidenav-item:hover { text-decoration: underline; }
.sidenav-active { font-weight: 600; text-decoration: underline; }

/* Navigation bottom (phone) */
#nav_btm { display: none; }
.nav-btm-item { padding: 12px 0; text-align: center; color: var(--light-black); font-size: 12px; }
.nav-btm-icon { width: 24px; height: 24px; margin: 0 auto 3px; object-fit: contain; }
.nav-btm-post, .nav-btm-post * { color: var(--primary); font-weight: 600; text-decoration: underline; }
.nav-btm-post:hover { color: var(--primary-dark); }

/* Dropup — same behaviour as the header dropdown, opening upward */
.dropup { position: relative; }
.dropup-btn { width: 100%; padding: 12px 0; border: none; background: transparent; cursor: pointer; color: var(--light-black); font-size: 12px; text-align: center; }
.dropup-avatar { width: 24px; height: 24px; margin: 0 auto 3px; border-radius: 50%; object-fit: cover; }
.dropup-content { display: none; position: absolute; bottom: 100%; right: 10px; margin-bottom: 6px; width: calc(100vw - 20px); background-color: white; border: 1px solid lightgrey; padding: 20px 10px; border-radius: 10px; box-shadow: 0 2px 7px #00000026, 0 5px 17px #0003; z-index: 101; }
.dropup-btn:focus + .dropup-content, .dropup-content:hover { display: unset; }
.dropup-lang { display: inline-block; margin-top: 10px; padding: 6px 10px; border: none; background-color: #efefef; border-radius: 6px; font-size: 12px; color: var(--light-black); }
.dropup-lang:hover { background-color: #e4e4e4; }
.dropup-lang-flag { display: inline-block; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 8px; }



/* ====================== Notification ====================== */
.lightnotif {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--light-black);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 99;
    max-width: 90%;
    text-align: center;
}
.lightnotif.lightnotif-visible { opacity: 1; transform: translateX(-50%) translateY(0); }



/* ====================== Pagination ====================== */
.pagination { margin: 0 auto; width: 100%; max-width: 500px; position: relative; }
.prev-page, .next-page { width: 36px; height: 36px; border-radius: 50%; font-size: 20px; text-align: center; padding-top: 5px; }
.prev-page  { float: left ; }
.next-page  { float: right; }
.prev-page:hover, .next-page:hover { background-color: rgb(238, 238, 238); }
.page-arrow-disabled { color: var(--input-border); cursor: default; }
.page-arrow-disabled:hover { background-color: transparent; } /* transparent, not white: the arrows have no background of their own */
.pages-nav  { margin: 0 auto; width: calc(100% - 88px); text-align: center; }
.page-link, .current-page, .ellipsis { display: inline-block; min-width: 36px; height: 36px; text-align: center; padding-top: 9px; border-radius: 6px; }
.current-page { background-color: var(--primary); color: white; font-weight: 500; }
.current-page:hover { background-color: var(--primary-dark); }
.page-link:hover { background-color: rgb(238, 238, 238); }
.ellipsis { color: rgb(128, 128, 128); }



/* ====================== Popup ====================== */
/* .overlay { set in "Ad / Event viewer" section } */
/* .overlay2 { set in "Ad / Event viewer" section } */
.overlay.popup-visible, .overlay2.popup-visible { display: flex;}
.popup { position: relative; width: calc(100% - 40px); max-width: 400px; }
.popup-ttl { float: left; width: calc(100% - 40px); }
.popup-subttl { float: left; width: 100%; color: #333; }
.popup-content { float: left; width: 100%; min-height: 40vh; max-height: 60vh; overflow: auto; }
.popup-content p { line-height: 150%; }
/* .popup-btn1 { set in "Buttons" section } */
/* .popup-btn2 { set in "Buttons" section } */
.popup-close2 { position: absolute; top: 10px; right: 10px; background-color: white; opacity: 0.8; border-radius: 50%; border: 1px solid var(--border-light-grey); transition: 0.1s; height: 36px; width: 36px; font-size: 16px; font-weight: 800; text-align: center; cursor: pointer; }

/* Language popup - a row is an <a> (another language) or a <button> (the current one, which only closes) */
.lang-choices { float: left; width: 100%; }
.lang-choice { display: flex; align-items: center; width: 100%; padding: 10px; border: none; border-radius: 6px; background: transparent; font-size: 16px; text-align: left; }
.lang-choice:hover { background-color: #f5f5f5; }
.lang-choice-active { color: var(--primary); font-weight: 600; }
.lang-flag { width: 24px; height: 24px; margin-right: 12px; }
.lang-tick { width: 16px; height: 16px; margin-left: auto; }



/* ====================== Post ====================== */
.post-cats { float: left; width: 200px; }
.post-cat { position: relative; margin-bottom: 8px; padding: 12px 16px 12px 46px; border-radius: 6px; background-color: white; border: 1px solid var(--border-light-grey); cursor: pointer; font-size: 14px; font-weight: 500; transition: background-color 0.3s; }
.post-cat:hover { background-color: rgb(238, 241, 244); }
.post-cat.post-cat-active { background-color: #efefef; }
.post-subcats { display: none; float: right; width: calc(100% - 220px); background-color: white; border: 1px solid var(--border-light-grey); border-radius: 6px; }
.post-subcats.post-cat-active { display: block; overflow: hidden; }
.post-subcat { display: block; padding: 10px 16px; color: var(--light-black); font-size: 14px; text-decoration: none; transition: background-color 0.3s; }
.post-subcats .post-subcat:nth-child(2n) { background-color: #f5f5f5; }
.post-subcat:hover { text-decoration: underline; }
/* "< Toutes les catégories": phone only, so it stays hidden here and is shown in the PHONE block */
.post-back { display: none; float: left; width: 100%; margin-bottom: 16px; color: var(--primary); font-weight: 500; cursor: pointer; }
.post-back:hover { color: var(--primary-dark); }

/* Post images */
#images { display: none; }
.postimgs-ctnr { float: left; width: 100%; padding: 20px; border: 1px dashed lightgrey; border-radius: 10px; }
.imgs-counter { float: left; width: 100%; text-align: center; margin-bottom: 15px; color: var(--light-black); }
.imgs-grid { position: relative; float: left; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; user-select: none; }
.uploadimgs-btn { display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1; border: 2px dashed var(--input-border); border-radius: 6px; font-size: 40px; font-weight: 300; color: var(--input-border); cursor: pointer; }
.uploadimgs-btn:hover { border-color: var(--primary); color: var(--primary); }
.uploadimgs-btn-disabled { opacity: 0.4; pointer-events: none; } /* To be updated with the final image at the end */
.img-preview { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background-color: var(--light-grey-bkgrd); cursor: grab; touch-action: none; transition: transform 0.3s ease, opacity 0.12s ease; }
.img-preview:first-of-type::after { position: absolute; top: 10px; left: 10px; content: 'Couverture'; padding: 4px 8px; background-color: var(--primary-dark); border-radius: 4px; color: white; font-weight: 500; font-size: 13px; }
html[lang="en"] .img-preview:first-of-type::after { content: 'Cover'; } /* the page's lang attribute picks the label */
.img-preview img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.img-preview-drag { opacity: 0.5; transform: scale(0.96); }
.img-preview-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: rgba(0, 0, 0, 0.55); color: white; font-size: 15px; line-height: 1; cursor: pointer; }
.img-preview-del:hover { background-color: rgba(0, 0, 0, 0.8); }

/* Description */
.descrptn-inpt { float: left; width: 100%; resize: vertical; min-height: 60px; max-height: 400px; }
.descrptn-counter { float: left; width: 100%; text-align: right; margin-top: 6px; }

/* Post event */
.date-input-group { float: left; width: calc(100% - 200px); position: relative; }
.time-input { float: left; width: 90px; margin-left: 10px; }




/* ====================== Profile ====================== */
.profile-box { float: left; width: 100%; border: 1px solid var(--border-light-grey); background-color: white; padding: 20px 30px; border-radius: 10px; margin-bottom: 20px; } 
.trader-bkgrd { float: left; width: 100%; aspect-ratio: 7 / 2; border-radius: 10px; margin-bottom: 6px; overflow: hidden; }
.trader-bkgrd img { float: left; width: 100%; height: 100%; object-fit: cover; }
.about-box { float: left; width: 100%; padding: 30px; background-color: #efefef; border-radius: 10px; }
.myavatar-btns-box { float: left; width: calc(100% - 120px); }



/* ====================== Register ====================== */
.regbox { width: 49%; border-radius: 6px; padding: 20px; border: 1px solid var(--border-light-grey); transition: 0.2s; }
.regbox:hover { background-color: #efefef; }
.regimg, .regimg2 { float: left; width: 100%; object-fit: cover; border-radius: 6px; margin-bottom: 24px; }
.regimg { aspect-ratio: 2 / 1; }
.regimg2 { aspect-ratio: 4 / 1; }
.ticklist { float: left; width: 100%; line-height: 150%; color: var(--light-black); }
.ticklist span { display: inline-block; width: 16px; color: inherit; } /* Fixed width: the text does not shift when the hyphen becomes a tick */
.reg-steps-ttl { font-weight: 600; }
.reg-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 0 18px; list-style: none; }
.reg-step { position: relative; text-align: center; font-size: 13px; line-height: 130%; color: var(--light-black); }
.reg-step::before { content: ''; position: absolute; top: 14px; left: calc(-50% + 22px); width: calc(100% - 44px); height: 4px; border-radius: 2px; background-color: rgba(255, 255, 255, 0.6); } /* the line from the previous dot */
.reg-step:first-child::before { display: none; }
.reg-step-done::before, .reg-step-active::before { background-color: var(--primary-dark); }
.reg-step-dot { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 6px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); font-weight: 600; color: var(--light-black); } /* grid: centres the tick and the numbers, and keeps an img margin from collapsing through */
.reg-step-done .reg-step-dot, .reg-step-active .reg-step-dot { background-color: var(--primary-dark); color: white; }
.reg-step-active { font-weight: 600; color: rgb(20, 20, 21); }
.reg-step-active .reg-step-dot { animation: reg-step-pulse 1.8s ease-out infinite; }
@keyframes reg-step-pulse { from { box-shadow: 0 0 0 0 rgba(54, 165, 69, 0.55); } to { box-shadow: 0 0 0 10px rgba(54, 165, 69, 0); } }
@media (prefers-reduced-motion: reduce) { .reg-step-active .reg-step-dot { animation: none; } }




/* ==================================================================== */
/*                          LAPTOP VIEW                                 */
/* ==================================================================== */
@media only screen and (min-width: 992px) {
    .hide-l { display: none !important; }
    .myavatar-btns-box { margin-top: 20px; }
}




/* ==================================================================== */
/*                          TABLET VIEW                                 */
/* ==================================================================== */
@media only screen and (min-width: 768px) and (max-width: 992px) {

    .hide-m { display: none !important; }


    /* ====================== Ads / Events ====================== */
    .ads, .ads.gv { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .lv .img-frame1 { width: 220px; height: 220px; margin-right: 20px; }
    .lv .ad-txt1 { width: calc(100% - 240px); }


    /* ====================== Body / layouts ====================== */
    /* Sidebars */
    .sdbar1 { width: 310px; }   /* sidebar main */
    .sdbar2 { width: 260px; }   /* sidebar ads  */
    .sdbar3 { display: none; }  /* sidebar ad   */
        
    /* Main children */
    .main1 { width: calc(100% - 310px); }
    .main2 { width: calc(100% - 260px); }
    .main3 { width: 100%; }


    /* ====================== Main page ====================== */
    /* Categories columns & Subcategories */
    .cat-col { width: calc(50% - 10px); margin-right: unset; }
    .cat-col:nth-of-type(2n) { float: right; }
    .cat-col:nth-of-type(3n) { float: left; }
    .cal-day { padding: 6px 0;; }


    /* ====================== Messages ====================== */
    .sdbar-msg  { width: 260px; }
    .msg-main   { width: calc(100% - 260px); }


    /* ====================== Search / Filters ====================== */
    /* Search */
    .search-input { width: 100%; margin: 10px 0 6px; }
    .search-select { width: calc(100% - 126px); }
}







/* ==================================================================== */
/*                          PHONE VIEW                                  */
/* ==================================================================== */
@media only screen and (max-width: 768px) {

    .hide-s { display: none !important; }


    .hdr-left { float: unset; margin: 0 auto; max-width: 260px; width: 100%; padding: 0 10px; }
    footer { padding-bottom: 90px; }


    /* ====================== Ad / Event ====================== */
    .adbox-big { padding: 0; border: none; }
    .img-frame2 { aspect-ratio: unset; height: 60vh; }
    .thumbnails { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .gv-suggestions { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
    .gv-suggestions .ad-img1 { aspect-ratio: 4 / 5 !important; }


    /* ====================== Ads / Events ====================== */
    .ads.lv { gap: 6px; } 
    .ads, .ads.gv { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } 
    .lv .img-frame1 { width: calc(60px + 24%); height: unset; margin-right: 14px; }
    .lv .ad-txt1 { width: calc(76% - 74px); }
    .lv .ad-descrptn1 { max-height: 38px; overflow: hidden; }
    @media only screen and (max-width: 419px) { .gv .ad-img1 { aspect-ratio: 5 / 4; } }
    .no-results { margin: 20px auto; padding: 20px 0; }
    .no-results img { width: 100px; }


    /* ====================== Body / layouts ====================== */
    .sdbar1, .main1, .sdbar2, .main2, .main3, .sdbar4, .main4 { width: 100%; } /* sidebar main */
    .sdbar4 { padding: 0; }


    /* ====================== Forms ====================== */
    .form-row-lft, .form-row-rgt, .submit-btn, .modif-img-btn, .cancel-img-btn { width: 100%; }
    .modif-img-btn { text-align: center; }


    /* ====================== Main page ====================== */
    /* Categories columns & Subcategories */
    .cat-col { width: 100%; margin: 0; }
    

    /* ====================== Messages ====================== */
    .sdbar-msg, .msg-main { height: calc(100vh - 230px); width: 100%; padding: 0; border-right: none; }
    .msg-backarrow { display: block; }
    .conv-thumb { width: 60px; height: 60px; } /* the img inside reuses .ad-img1 */
    .conv-txt { width: calc(100% - 72px); }
    .msg-head-txt { width: calc(100% - 112px); }
    .msg-bubble { max-width: 80%; }


    /* ====================== Navigation ====================== */
    /* Profile sidebar */
    .profile-sidenav { background-color: white; border-radius: 0; padding: 0 20px; margin-bottom: 20px; text-wrap: nowrap; overflow-y: auto; }
    .sidenav-item { background-color: #e0e0e0; border-radius: 4px; display: inline-block; padding: 6px 10px; margin-right: 6px; }
    .overlay2.popup-visible { align-items: flex-end; }

    /* Once JS moves it into the shell, the sidebar itself becomes the popup card
        (same look as .popup + .box; display !important needed to beat .hide-s) */
    #filters_popup .sdbar2 { display: block !important; position: relative; width: calc(100% - 40px); max-width: 400px; padding: 20px; background-color: white; border: 1px solid var(--border-light-grey); border-radius: 6px; bottom: 20px; }
    /* Internal scroll (same role as .popup-content): the chrome stays put, only the form scrolls */
    #filters_popup .sdbar2 > form { max-height: 70vh; overflow: auto; }


    /* ====================== Popup ====================== */
    .popup { bottom: 20px; }


    /* ====================== Post Ad ====================== */
    .post-cats, .post-subcats { float: none; width: 100%; }
    .post-subcats { margin-top: 8px; }
    .post-back.post-back-active { display: block; } /* JS adds the state class on a category click; the rule is phone-only, so a desktop click shows nothing */
    .imgs-grid { grid-template-columns: repeat(2, 1fr); }

    /* ====================== Post Ad ====================== */
    .regbox { width: 100%; }
    .regbox:first-of-type { margin-bottom: 10px; }


    /* ====================== Search / Filters ====================== */
    .ads-results { float: left; width: 100%; }    
    #nav_btm {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        border-top: 1px solid lightgrey;
        box-shadow: 0 -2px 7px #00000012;
        z-index: 98;
    }
    .show-filters { display: block; float: right; background-color: white; padding: 8px 10px; border: 1px solid var(--border-light-grey); border-radius: 4px; position: relative; }
    /* Red dot: marks that at least one sidebar filter (location, price, category) is applied */
    .show-filters-active::after { content: ''; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; background-color: red; border: 1px solid white; border-radius: 50%; }

    /* Search */
    .search-input { width: 100%; margin-bottom: 6px; }
    .search-select { width: calc(100% - 126px); }
}