/* Set the Manrope font for the entire body */ @font-face { font-family: 'Manrope'; src: url('../fonts/manrope-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Manrope Medium */ @font-face { font-family: 'Manrope'; src: url('../fonts/manrope-v20-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* Manrope ExtraBold */ @font-face { font-family: 'Manrope'; src: url('../fonts/manrope-v20-latin-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } body { font-family: 'Manrope', sans-serif; overflow-x: hidden; } body a { text-decoration: auto; -webkit-text-decoration: none; /* Safari prefix */ } /* * Stack rhythm: grey strip → first list card uses --menu-strip-stack-rhythm / overrides. * Purple header → grey strip uses --header-to-menu-gap (px) so it never drifts across breakpoints. */ :root { --header-strip-stack-gap: 0.65rem; /* Purple header ↔ grey menu strip: px-locked so it does not drift with root rem / breakpoints */ --header-to-menu-gap: 10.5px; --menu-strip-stack-rhythm: var(--header-strip-stack-gap); /* Mobile strip search column (input + button); legacy 153px +20% wider typing lane */ --nav-strip-search-width: calc(153px * 1.2); /* Equal spacing between mini-strip controls (beats inline gap on .nav-bot-view) */ --nav-strip-gap: 5px; /* Grid tile gutters: same in narrow and wide (flex gap + width calcs stay in sync) */ --grid-view-gap: 10px; } html body .container.bottom-header.mt-3 { margin-top: var(--header-to-menu-gap) !important; } /* Gap between filter strip and ads container */ html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: -10px !important; } /* Mobile: keep a positive visual gap */ @media only screen and (max-width: 767.9px) { html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 8px !important; } } /* ABSOLUTE LAST: phone portrait keeps same gap as landscape */ @media only screen and (max-width: 767.9px) and (orientation: portrait) { html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 22px !important; } } /* Phone portrait: match the larger landscape strip->first ad spacing */ @media only screen and (max-width: 767.9px) and (orientation: portrait) { html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 22px !important; } } /* TRUE FINAL LOCK: desktop narrow window, keep gap + remove jump */ @media only screen and (min-width: 768px) and (max-width: 980px) { /* Keep mini-menu wrapping on 2 rows when needed, but with stable geometry */ html body .container.bottom-header .nav-bot-view { flex-wrap: wrap !important; row-gap: 6px !important; align-items: center !important; } /* Reserve icon slots before FA classes load to prevent reflow jump */ html body .container.bottom-header .deferred-fa:not(.grid-icon):not(.list-icon) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.25em !important; min-width: 1.25em !important; height: 1em !important; line-height: 1 !important; vertical-align: middle !important; overflow: hidden !important; } /* Requested extra spacing for this exact narrow desktop class */ html body .container.container-posts, html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 12px !important; padding-top: 0 !important; transition: none !important; animation: none !important; } html body .container.bottom-header.mt-3 + .container.container-posts > .card-posts, html body .container.bottom-header.mt-3 + .container.container-posts > .card-posts.list-view, html body .container.bottom-header.mt-3 + .container.container-posts > .card-posts.grid-view, html body .container.bottom-header.mt-3 + .container.container-posts > .card-posts > .card { margin-top: 0 !important; padding-top: 0 !important; transform: none !important; transition: none !important; animation: none !important; } } /* ABSOLUTE FINAL: specific narrow desktop landscape lock (must stay last) */ @media only screen and (min-width: 768px) and (max-width: 940px) and (min-height: 620px) and (max-height: 860px) and (hover: hover) and (pointer: fine) { html body .container.bottom-header .nav-bot-view, html body .container.bottom-header .nav-bot-view > div, html body .container.bottom-header .nav-bot-view .selectize-control, html body .container.bottom-header .nav-bot-view .selectize-input { transition: none !important; animation: none !important; } html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 40px !important; transition: none !important; animation: none !important; } html body .container.container-posts, html body .container.container-posts > .card-posts, html body .container.container-posts > .card-posts > .card { transition: none !important; animation: none !important; transform: none !important; } } /* ABSOLUTE LAST: reserve icon widths to avoid post-interaction reflow in this exact desktop range */ @media only screen and (min-width: 768px) and (max-width: 940px) and (min-height: 620px) and (max-height: 860px) and (hover: hover) and (pointer: fine) { html body .container.bottom-header .nav-bot-view .deferred-fa:not(.grid-icon):not(.list-icon) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.25em !important; min-width: 1.25em !important; height: 1em !important; line-height: 1 !important; vertical-align: middle !important; overflow: hidden !important; } html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 40px !important; } } /* Absolute final stability lock for desktop narrow window (prevents load/interact jumping) */ @media only screen and (max-width: 767.9px) and (hover: hover) and (pointer: fine) { html body .container.bottom-header .nav-bot-view { min-height: auto !important; row-gap: 6px !important; align-items: center !important; flex-wrap: wrap !important; } html body .container.bottom-header.mt-3 { min-height: auto !important; } html body .container.bottom-header .nav-bot-view > div:nth-child(2), html body .container.bottom-header .nav-bot-view > div:nth-child(2) .form-group, html body .container.bottom-header .nav-bot-view > div:nth-child(2) .selectize-control.single, html body .container.bottom-header .nav-bot-view > div:nth-child(2) .selectize-control.single .selectize-input, html body .container.bottom-header .nav-bot-view > div:nth-child(2) select#citySelect.w-100 { min-height: 37px !important; height: 37px !important; margin-top: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; } html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 48px !important; transition: none !important; animation: none !important; } html body .container.container-posts, html body .container.container-posts > .card-posts, html body .container.container-posts > .card-posts > .card { transition: none !important; animation: none !important; } } /* Specific narrow desktop landscape window: push ads a little lower only here */ @media only screen and (min-width: 768px) and (max-width: 940px) and (min-height: 620px) and (max-height: 860px) and (hover: hover) and (pointer: fine) { html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 40px !important; } } /* Desktop browser narrowed to mobile width: keep ads lower, without affecting real mobile */ @media only screen and (max-width: 767.9px) and (hover: hover) and (pointer: fine) { html body .container.container-posts, html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 48px !important; } } /* Final hard lock: desktop narrow window must keep stable strip->ads gap after interactions */ @media only screen and (max-width: 767.9px) and (hover: hover) and (pointer: fine) { html body .container.container-posts { margin-top: 48px !important; } html body .container.container-posts > .card-posts, html body .container.container-posts > .card-posts.list-view, html body .container.container-posts > .card-posts.grid-view { margin-top: 0 !important; padding-top: 0 !important; transform: none !important; } html body .container.container-posts > .card-posts.list-view > .card.mt-3:first-child, html body .container.container-posts > .card-posts.grid-view > .card.mt-3:first-child { margin-top: 0 !important; transform: none !important; } } /* SIDEBAR ALWAYS ON TOP (final lock) */ body.sidebar-open::before { content: ""; position: fixed; inset: 0; z-index: 2147483645 !important; background: transparent; } body.sidebar-open .custom-header, body.sidebar-open .bottom-header, body.sidebar-open .nav-bot-view, body.sidebar-open .container.bottom-header.mt-3 { position: relative !important; z-index: 0 !important; } body.sidebar-open #sidebar { position: fixed !important; z-index: 2147483647 !important; } body.sidebar-open #sidebar * { position: relative; z-index: 2147483647 !important; } /* Guaranteed fallback: while sidebar is open, keep top menu strip behind it */ body.sidebar-open .container.bottom-header.mt-3, body.sidebar-open .container.bottom-header.mt-3 .nav-bot-view { visibility: hidden !important; pointer-events: none !important; } /* Brute-force fallback: hide both header strips while sidebar is open */ body.sidebar-force-front .custom-header .header-top > .container, body.sidebar-force-front .container.bottom-header.mt-3 { display: none !important; } body.sidebar-force-front #sidebar, body.sidebar-force-front #sidebar.show { position: fixed !important; top: 0 !important; right: 0 !important; height: 100vh !important; z-index: 2147483647 !important; visibility: visible !important; } /* Desktop window narrowed to mobile width: keep ads below menu bar */ @media screen and (max-width: 767.9px) and (min-height: 850px) { html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 22px !important; padding-top: 0 !important; } html body .container.bottom-header.mt-3 + .container.container-posts > .card-posts, html body .container.bottom-header.mt-3 + .container.container-posts > .card-posts.list-view, html body .container.bottom-header.mt-3 + .container.container-posts > .card-posts.grid-view { margin-top: 0 !important; padding-top: 0 !important; box-sizing: border-box; } html body .container.bottom-header.mt-3 + .container.container-posts > .card-posts.list-view > .card.mt-3:first-child, html body .container.bottom-header.mt-3 + .container.container-posts > .card-posts.grid-view > .card.mt-3:first-child { margin-top: 0 !important; } } /* FINAL DESKTOP INTERACTION STABILITY LOCK */ @media screen and (min-width: 768px) { html body .container.bottom-header .nav-bot-view { min-height: 46px !important; align-items: center !important; row-gap: 0 !important; flex-wrap: nowrap !important; } html body .container.bottom-header.mt-3 { min-height: calc(46px + var(--header-to-menu-gap)) !important; } html body .container.bottom-header.mt-3 + .container.container-posts { margin-top: 22px !important; padding-top: 0 !important; } html body .container.bottom-header.mt-3 + .container.container-posts .card-posts, html body .container.bottom-header.mt-3 + .container.container-posts .card-posts.list-view, html body .container.bottom-header.mt-3 + .container.container-posts .card-posts.grid-view { margin-top: 0 !important; padding-top: 0 !important; box-sizing: border-box; } html body .container.bottom-header.mt-3 + .container.container-posts .card-posts.list-view > .card.mt-3:first-child, html body .container.bottom-header.mt-3 + .container.container-posts .card-posts.grid-view > .card.mt-3:first-child { margin-top: 0 !important; } } .card-posts.list-view > .card.mt-3:first-child { margin-top: var(--menu-strip-stack-rhythm) !important; } .btn-link { -webkit-text-decoration: none; /* Safari prefix */ } button { border: solid; } .container-post #modalphone_number {} .container-post .social-icons {} /* Custom styles for the header */ .custom-header { background: #6A11CF; color: white; padding: 9.5px 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; position: relative; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1)); overflow: visible; /* overflow-x: clip; */ z-index: 1; } .bottom-header { z-index: 1; position: relative; } /* * Mini strip: flex-start + wrap (no justify flip at 768px). Push ALL ADS → EN right with * margin-left:auto on the first control after search (2nd child): works when (1) is visible or * display:none (≥768). Resets: ≤430 portrait two-row, phone-landscape grid. */ .container.bottom-header .nav-bot-view { justify-content: flex-start !important; flex-wrap: wrap; gap: var(--nav-strip-gap) !important; row-gap: var(--nav-strip-gap) !important; column-gap: var(--nav-strip-gap) !important; } .container.bottom-header .nav-bot-view > div:nth-child(2) { margin-left: auto !important; } .container.bottom-header .nav-bot-view > div:nth-child(6) { flex-shrink: 0 !important; } .container.bottom-header .nav-bot-view .header-langs .dropdown-btn { display: inline-flex; align-items: center; gap: var(--nav-strip-gap); /* Match compact hit-area so outer --nav-strip-gap reads like spacing to night toggle */ padding: 4px 8px !important; } .container.bottom-header .nav-bot-view .header-langs .dropdown-btn i { margin-right: 0 !important; } /* Inline margin-left on theme wrapper (header.php); keep only flex gap vs view icons */ .container.bottom-header .nav-bot-view > div:nth-child(5) .control-group.city-selection-a { margin-left: 0 !important; } /* Country (3) + view icons (4): hug content so flex gap equals other strip steps (no 100px slack) */ .container.bottom-header .nav-bot-view > div:nth-child(3) { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .container.bottom-header .nav-bot-view > div:nth-child(3) .dropdown { margin: 0 !important; } .container.bottom-header .nav-bot-view > div:nth-child(4) { margin: 0 !important; padding: 0 !important; } /* .btn{ font-family: "Manrope", sans-serif; font-weight: 800; font-size: 14px; line-height: 30px; border-radius: 8px; text-transform: uppercase; box-shadow: 0 4px 4px rgba(0, 0, 0, .25); padding: 10px 35px 9px 35px; font-feature-settings: 'liga' off; } */ .btn-red { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 14px; line-height: 30px; border-radius: 8px; text-transform: uppercase; box-shadow: 0 4px 4px rgba(0, 0, 0, .25); padding: 10px 35px 9px 35px; font-feature-settings: 'liga' off; background: #FF004C; color: #fff !important; } /* .btn-red a{ background-color: transparent; border-color: transparent; padding: 0; } */ .btn-red .btn:hover { color: #fff; background-color: #FF004C; border-color: #FF004C; border: none; } .btn-red:hover { color: #fff; background-color: #FF004C; border-color: #FF004C; } /* Adding an SVG with ::before */ .custom-header::before { content: ""; background: url("/assets/images/header-bg-1.svg") no-repeat; background-size: 0%; display: block; position: absolute; width: 500px; height: 250px; right: 0px; top: -50px; } .custom-header:after { content: ""; background: url("/assets/images/header-bg-2.svg") no-repeat; width: 1070px; height: 260px; right: 0; top: -75px; background-size: 120%; position: absolute; z-index: -2; } .heart-icon { width: 50px; height: 50px; } .btn-white { background-color: white; } /* Menu categories */ .menu { display: flex; gap: 3px; font-size: 14px; font-weight: 700; text-transform: uppercase; width: 68%; flex-wrap: wrap; } /* Menu styles */ .menu a { text-decoration: none; /* Remove the default underline */ color: white; font-size: 13px; text-transform: uppercase; font-weight: 800; /* Extra bold text */ margin-right: 15px; position: relative; /* Needed to position the custom underline */ padding-bottom: 5px; /* Add some space between text and underline */ transition: color 0.3s ease-in-out; /* Smooth color transition */ letter-spacing: 1px; font-weight: 700; text-align: right; } .dark-mode .modal-body a { color: #c7c1b6; } /* Custom underline on hover */ .menu a::after { content: ""; position: absolute; left: 0; bottom: 4px; /* Position the underline at the bottom */ width: 0; /* Start with no underline */ height: 2px; /* Thickness of underline */ background-color: white; /* Color of underline */ /*transition: width 0.3s ease-in-out; /* Smooth transition for underline width */ } .menu a .active { content: ""; position: absolute; left: 0; bottom: 0; /* Position the underline at the bottom */ width: 0; /* Start with no underline */ height: 3px; /* Thickness of underline */ background-color: white; /* Color of underline */ transition: width 0.3s ease-in-out; /* Smooth transition for underline width */ } /* On hover, show the underline */ .menu a:hover::after { width: 100%; /* Full underline width on hover */ } /* Style the Post Ad button */ .btn-custom { background-color: white; color: #6b00b6; font-weight: bold; } /* Flexbox for aligning menu and button */ .menu-button-container { display: flex; justify-content: space-between; align-items: center; } .logo, .logo-class a { z-index: 2; width: 162px; margin-left: 7px; } .logo-class:before { position: absolute; content: ''; /* left: -22px; */ top: -26px; width: 155px; height: 155px; background-image: url("/assets/images/ic-heart.svg"); background-repeat: no-repeat; background-size: cover; z-index: 0; transform: scale(-1, 1); } .menu-button-container { font-weight: 700; font-size: 14px; line-height: 28px; letter-spacing: 1px; text-transform: uppercase; color: #ffffff; position: relative; } /* .header-lang__link { font-weight: 800; font-size: 14px; line-height: 30px; color: #ffffff; text-transform: uppercase; position: relative; } */ /* Language options in the top-right */ .header-lang__link a { font-weight: 800; font-size: 14px; line-height: 30px; color: #ffffff; text-transform: uppercase; position: relative; margin-left: 15px; } /* Menu styles */ .header-langs a { text-decoration: none; /* Remove the default underline */ color: white; font-size: 14px; text-transform: uppercase; font-weight: 800; /* Extra bold text */ /* margin-right: 15px; */ position: relative; /* Needed to position the custom underline */ padding-bottom: 5px; /* Add some space between text and underline */ transition: color 0.3s ease-in-out; /* Smooth color transition */ } /* Custom underline on hover */ .header-langs a::after { content: ""; position: absolute; left: 0; bottom: 4px; /* Position the underline at the bottom */ width: 0; /* Start with no underline */ height: 2px; /* Thickness of underline */ background-color: white; /* Color of underline */ } /* Show underline on hover */ .header-langs a:hover::after { width: 100%; /* Expand to full width on hover */ } /* Active state underline */ .header-langs a.active::after, .menu a.active::after { width: 100%; /* Full width for active links */ } /* On hover, show the underline */ .header-langs a:hover::after { width: 100%; /* Full underline width on hover */ } #sidebar { visibility: hidden; } @media screen and (min-width: 992px) { .header-btn::after { position: absolute; content: ''; right: -37px; top: -75px; width: 209px; height: 184px; z-index: -1; background: url('/assets/images/ic-heart.svg') no-repeat; background-size: auto; background-size: cover; } } .flag-icon { border-radius: 3px; } .dropdown-item i.flag-icon { margin-right: 10px; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; z-index: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; border-color: #242525 !important; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: #ffffff; transition: .4s; border-radius: 50%; z-index: 1; } html[data-wp-dark-mode-active] .slider:before { background-color: #242525; } .icon-moon, .icon-sun { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-size: cover; } .icon-moon { left: 4px; z-index: 0; color: white; } .icon-sun { right: 4px; z-index: 0; } input:checked+.slider { background-color: rgb(77, 38, 116); border: solid; border-width: 1px; } input:checked+.slider:before { transform: translateX(26px); } .moon-svg path, .sun-svg path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #switch-status { margin-top: 10px; font-size: 18px; } .ourworld-fav { width: 27px; height: 20px; object-fit: cover; margin-right: 10px; border-radius: 3px; } .step { display: none; } .step.active { display: block; } .step-indicators { display: flex; justify-content: space-between; margin-bottom: 20px; } .step-indicator { flex: 1; text-align: center; padding: 10px; border-radius: 5px; background-color: transparent; cursor: pointer; transition: background-color 0.3s; } .step-indicator.active { background-color: transparent; color: black; } .image-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; /* margin-top: 20px; */ } .image-placeholder, .image-item { position: relative; height: 100px; background-color: #F9F7F7; border: 1px solid #ccc; border-radius: 5px; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .05)); } .image-item img { max-width: 100%; max-height: fit-content; object-fit: cover; } .remove-icon { position: absolute; top: 5px; right: 5px; cursor: pointer; color: red; font-size: 18px; background: white; border-radius: 50%; padding: 2px; } .main-image { background-color: #F9F7F7; border: 2px solid #007bff; border-radius: 5px; margin-left: 20px; height: 320px; overflow: hidden; display: flex; justify-content: center; align-items: center; } .main-image img { max-width: 100%; max-height: fit-content; object-fit: contain; } .add-img { width: 40px; height: 40px; fill: #007bff; } .instructions { margin-top: 10px; font-size: 0.9rem; color: #555; } .btn-next { background-color: green; color: white; border: none; margin-top: 20px; float: right; } .btn-back { /* background-color: green; */ color: white; border: none; } .btn-preview { background-color: red; color: white; border: none; } .steps-n { width: 72px; height: 72px; font-size: 30px; line-height: 52px; text-align: center; background: #F8F2FF; border-radius: 50%; padding: 10px; margin: 0 auto; margin-bottom: 0px; color: #AB7AE4; margin-bottom: 16px; font-size: 34px; font-weight: 800; } .step-indicator.active { color: #6A11CF; font-weight: 900; } /* @media screen and (min-width: 992px) { */ /* .step-indicator#stepIndicator1::after { position: absolute; content: ''; top: 244px; width: 160px; height: 33px; background: url(https://sexer.ee/images/svg/line-indicator.svg) no-repeat; margin-left: 61px; } .step-indicator#stepIndicator2::after { position: absolute; content: ''; top: 233px; width: 160px; height: 33px; background: url(https://sexer.ee/images/svg/line-indicator.svg) no-repeat; margin-left: 61px; } */ .step-indicator:nth-child(2)::after { /* right: 0; */ transform: rotate(180deg); /* margin-top: -32px; */ } /* } */ .btn-success { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 14px; line-height: 30px; border-radius: 8px; text-transform: uppercase; box-shadow: 0 4px 4px rgba(0, 0, 0, .25); padding: 10px 35px 9px 35px; font-feature-settings: 'liga' off; background: green; color: #fff !important; } /* Styling the container */ .social-networks { display: flex; flex-direction: row-reverse; align-content: flex-start; justify-content: center; align-items: center; } .social-icons { display: flex; } .social-icons-post { display: inline-flex; gap: 1px; margin-left: 2px !important; margin-right: 5px; } /* Default icon style */ .social-icons { font-size: 40px; color: #000; text-decoration: none; margin-left: 10px; } /* Specific colors for each icon */ .social-icons .whatsapp { color: #25d366; /* WhatsApp's official green */ } .social-icons .facebook { color: #3b5998; } .social-icons .skype { color: #00aff0; } .social-icons .telegram { color: #0088cc; } .social-icons .teams { color: #6264a7; } .social-icons .signal { color: #3a76f0; } .social-icons .viber { color: #665cac; } /* Add hover effect */ .social-icons :hover { opacity: 1; } .payment-box { padding: 27px; border: 4px solid #e0e0e0; border-radius: 20px; display: flex; flex-direction: column; justify-content: flex-start; /* margin: 0 30px; */ position: relative; height: 100%; } .payment-item__text { text-align: center; color: #FF004C; font-weight: 700; font-size: 13px; height: 100px; word-break: break-all; } .payment-item__block { color: #f00; position: relative; } .upraise-sms.pop { background-color: green; font-size: 24px; border-radius: 10px; } .payment-item__block { background: #ffffff; border-radius: 16px; padding: 30px; text-align: left; border: 2px solid #F8F2FF; font-weight: 500; font-size: 13px; letter-spacing: 1px; font-family: "Manrope", sans-serif; box-shadow: 0px 7px 14px -2px rgba(0, 0, 0, 0.04); margin-bottom: 40px; text-align: left; position: relative; } .basic-payment-box .payment-item__text { color: black; } .basic-payment-box .payment-item__block { color: black; } .payment-small-text { font-size: 13px; line-height: 16px; letter-spacing: 1px; font-family: "Manrope", sans-serif; color: #828282; display: block; margin-bottom: 14px; text-align: center; margin-top: 10px; } .payment-item.payment-item-special::after { position: absolute; content: ''; right: -24px; top: -28px; width: 73px; height: 69px; z-index: 0; background: url('/assets/images/ic-heart.svg') no-repeat; background-size: cover; } .payment-item.payment-item-special { border: 4px solid #ff004d; } .payment-item .paysera .btn { /* background: #ffc439 url('/assets/images/logo-Paysera.webp') no-repeat center; */ background: #ffc439; background-size: 90px; font-size: 22px; display: block; padding: 6px; color: green; box-shadow: none; font-weight: 800; } .basic-payment-box .paysera .btn, .payment-item-special .paysera .btn { /* background: #ffc439 url('/assets/images/logo-Paysera.webp') no-repeat center; */ background: #ffc439; background-size: 90px; font-size: 22px; display: block; padding: 0px; color: green; box-shadow: none; font-weight: 800; } /* Keep PayPal button width inside payment card bounds (mobile + desktop). */ .payment-box .paysera, .payment-box .paypal-container { width: 100%; min-width: 0 !important; max-width: 100%; overflow: hidden; } .payment-box .paysera .btn { width: 100%; box-sizing: border-box; } .payment-box .paypal-container > div, .payment-box .paypal-container iframe { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; } .payment-box .riseup-img { width: 6em; margin-right: 10px; margin-top: -4px; } .payment-box .riseup2-img { width: 5em; margin-right: 10px; margin-top: -4px; } .grid-switch-menu { cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; gap: var(--nav-strip-gap); /* Two 28px targets + one gap between icons */ min-width: calc(28px + var(--nav-strip-gap) + 28px); } .grid-switch-menu i.active, .grid-switch-menu span.active { color: white; background-color: #6A11CF; padding: 5px; border-radius: 5px; /* Keep purple chip at legacy size (do not inherit deferred-fa min box) */ min-width: auto !important; min-height: auto !important; height: auto !important; width: auto !important; } /* Same hit box before and after .fas — placeholders only applied :not(.fas) before, which caused CLS */ .grid-switch-menu .deferred-fa.grid-icon, .grid-switch-menu .deferred-fa.list-icon { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 28px; /* Match active row height (28 + 5+5 padding) so both icons sit the same vs the bar top */ min-height: 38px; font-size: 16px; line-height: 1; vertical-align: middle; } /* SVG placeholders until Font Awesome loads */ .grid-switch-menu .deferred-fa.grid-icon:not(.fas), .grid-switch-menu .deferred-fa.list-icon:not(.fas) { background-repeat: no-repeat; background-position: center; background-size: 14px 14px; } .grid-switch-menu .deferred-fa.grid-icon:not(.fas):not(.active) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236A11CF' d='M0 96h192v192H0V96zm320 0h192v192H320V96zM0 416h192v192H0V416zm320 0h192v192H320V416z'/%3E%3C/svg%3E"); } .grid-switch-menu .deferred-fa.grid-icon:not(.fas).active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M0 96h192v192H0V96zm320 0h192v192H320V96zM0 416h192v192H0V416zm320 0h192v192H320V416z'/%3E%3C/svg%3E"); } .grid-switch-menu .deferred-fa.list-icon:not(.fas):not(.active) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236A11CF' d='M64 144a48 48 0 1 0 0-96 48 48 0 0 0 0 96zM0 212V176c0-8.8 7.2-16 16-16h480c8.8 0 16 7.2 16 16v36c0 8.8-7.2 16-16 16H16c-8.8 0-16-7.2-16-16zm0 96V272c0-8.8 7.2-16 16-16h480c8.8 0 16 7.2 16 16v36c0 8.8-7.2 16-16 16H16c-8.8 0-16-7.2-16-16zm448 96c8.8 0 16-7.2 16-16v-36c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v36c0 8.8 7.2 16 16 16h480z'/%3E%3C/svg%3E"); background-size: 15px 14px; } .grid-switch-menu .deferred-fa.list-icon:not(.fas).active { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M64 144a48 48 0 1 0 0-96 48 48 0 0 0 0 96zM0 212V176c0-8.8 7.2-16 16-16h480c8.8 0 16 7.2 16 16v36c0 8.8-7.2 16-16 16H16c-8.8 0-16-7.2-16-16zm0 96V272c0-8.8 7.2-16 16-16h480c8.8 0 16 7.2 16 16v36c0 8.8-7.2 16-16 16H16c-8.8 0-16-7.2-16-16zm448 96c8.8 0 16-7.2 16-16v-36c0-8.8-7.2-16-16-16H16c-8.8 0-16 7.2-16 16v36c0 8.8 7.2 16 16 16h480z'/%3E%3C/svg%3E"); background-size: 15px 14px; } .grid-switch-menu .deferred-fa.fas { background-image: none !important; font-size: 16px; line-height: 1; } /* Inline margin-right on grid icon (header.php); strip uses .grid-switch-menu gap instead */ .grid-switch-menu .deferred-fa.grid-icon { margin-right: 0 !important; } /* Native city select — matches Selectize until JS loads */ .nav-bot-view select#citySelect.w-100 { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 37px; border: 1px solid #f1f1f1; border-radius: 8px; box-shadow: none; background-color: #fff; background-image: none; padding: 0 10px; font-weight: 700; font-size: 13px; color: #6A11CF !important; cursor: pointer; width: 100%; max-width: 100%; } .nav-bot-view select#citySelect.w-100::-ms-expand { display: none; } .nav-bot-view select#citySelect.w-100:focus { outline: none; border-color: #e5e4e4; } .dark-mode .nav-bot-view select#citySelect.w-100 { background-color: #242525; border-color: rgba(255, 255, 255, 0.18); color: #6A11CF !important; background-image: none; } /* City Selectize — same box model as native #citySelect (avoids CLS when JS enhances) */ .nav-bot-view .selectize-control.single { display: block; width: 100%; min-width: 0; margin: 0; vertical-align: top; } .nav-bot-view .selectize-control.single .selectize-input { box-sizing: border-box; display: flex !important; align-items: center; width: 100% !important; min-height: 37px; height: 37px !important; padding: 0 10px !important; font-size: 13px; font-weight: 700; line-height: 1.2; } .nav-bot-view .selectize-control.single .selectize-input > input { flex: 1 1 auto; min-width: 0; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; line-height: inherit !important; font: inherit !important; font-weight: inherit !important; color: inherit !important; } .header-btn { margin-right: 50px; } .header-btn .btn-custom { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 14px; line-height: 30px; border-radius: 8px; text-transform: uppercase; box-shadow: 0 4px 4px rgba(0, 0, 0, .25); padding: 5px 10px; font-feature-settings: 'liga' off; border: 0px solid; } .header-btn .btn:hover { background-color: white; color: #6A11CF; } /* Style for the dropdown button */ .dropdown { position: relative; display: inline-block; } .dropdown-btn { background-color: transparent; /* Button color */ color: rgb(0, 0, 0); padding: 10px; font-size: 16px; border: none; cursor: pointer; width: auto; /* Adjust width if needed */ text-align: left; font-weight: 900; } .dropdown-btn:hover { background-color: transparent; /* Hover color */ } .dropdown-btn::after { /* display: inline-block; margin-left: .255em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; */ } /* Hidden by default, shown on hover */ .dropdown-content { display: none; background: #8C30F5; width: 80px !important; min-width: 80px; z-index: 2; position: absolute; /* left: -17px; */ } .dropdown-content a { color: white; padding: 2px; text-decoration: none; display: block; margin-left: 10px; /* text-align-last: center; */ } .dropdown-content a:hover { background-color: unset; } .dropdown-content a::after { background-color: unset; } /* Show the dropdown content on hover */ .dropdown:hover .dropdown-content { display: block; } /* Sidebar styles */ #sidebar { position: fixed; top: 10px; right: -300px; /* Initially hidden off-screen */ width: 200px; /* Sidebar width */ height: auto; /* Full height of the viewport */ background-color: #6A11CF; color: white; transition: right 0.4s ease-in-out; /* Smooth slide animation */ padding: 1rem; z-index: 2147483647 !important; /* Ensure it overlays other content */ border-bottom-left-radius: 20px; border-top-left-radius: 20px; border: 5px solid red; padding-top: 0; } /* When the sidebar is shown */ #sidebar.show { visibility: visible; right: 0; } /* Keep sidebar above all header/menu layers while open */ body.sidebar-open .custom-header { z-index: 2147483646 !important; } body.sidebar-open #sidebar { z-index: 2147483647 !important; } #sidebar .menu .active::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 2px; background-color: white; } /* Apply hover effect only to hovered link */ #sidebar .menu a:hover::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 2px; background-color: white; } /* Close button */ #closeBtn-btn { /* position: absolute; */ top: 15px; right: 15px; color: white; cursor: pointer; font-size: 45px; } .toggle-sidebar { background-color: transparent; border-color: transparent; } #sidebar .header-icons { display: flex !important; flex-direction: row-reverse; align-content: center; align-items: center; justify-content: space-between; } .hidden-desktop { display: none !important; } .nav-bot-view { z-index: 2; } .grid-view .title-name { margin-bottom: 0px; line-height: 15px !important; line-break: anywhere; /* height: 17px; overflow: hidden; */ } .grid-view .only-grid.tile-city { display: flex; flex-direction: row; flex-wrap: wrap; } .grid-view .only-grid .title-name { height: 15px; overflow: hidden; } .grid-view .email-text { margin-bottom: 0px; line-height: 15px !important; } .city-name { color: black !important; } .featured .city-name { color: #6A11CF !important; } .btn-red:active { background-color: red !important; } /* General Styles */ .container { max-width: 900px; margin: 0 auto; } .card-snippets { gap: 10px; } .card-snippets span { font-size: 16px; line-height: 11px; color: #18191F; font-weight: 900; word-break: break-word; } .featured .title-name { color: #6A11CF !important; } .featured .card-number { color: #6A11CF !important; } .card-body a { color: unset; text-decoration: auto; } .post-image { cursor: pointer; } /* Reserve space for card images to reduce CLS */ .list-view .image-dic img, .container-single-post .random-post .post-image { display: block; aspect-ratio: 3 / 4; object-fit: cover; background: #f2f2f2; } .featured .card-snippets span { font-size: 16px; line-height: 11px; color: red; font-weight: 700; word-break: break-word; } .grid-view .card-snippets span { /* margin-top: -5px; */ } .card-social { margin-left: 0px; } .featured::after { position: absolute; content: ''; right: -24px; top: auto; bottom: -50px; width: 90px; height: 90px; z-index: 3; background: url('/assets/images/ic-heart.svg') no-repeat; background-size: cover; } .item-models__text { font-family: "Manrope", sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #18191F; margin-bottom: 5px; word-break: break-all; } .item-models__text { height: 100px; overflow: hidden; } .list-view .item-models__text { height: 100px; overflow: hidden; word-break: break-all; } .featured .date { color: red !important; } .grid-view .date { color: rgba(33, 37, 41, 0.75) !important; } /* Grid Layout */ .card-posts { display: flex; grid-template-columns: repeat(4, 1fr); /* 5 items per row */ gap: var(--grid-view-gap); flex-wrap: wrap; } /* Avoid rendering cost for below-the-fold cards in long lists */ @supports (content-visibility: auto) { .card-posts .card { content-visibility: auto; contain-intrinsic-size: 380px; } /* Featured heart (::after) extends outside the card; content-visibility clips it */ .card-posts .card.featured { content-visibility: visible; overflow: visible; } } .card { display: flex; flex-direction: column; height: 100%; } .card img { width: 100%; height: auto; border-radius: 8px; } .card .card-body { flex: 1; } .grid-view .item-models__text { height: 58px; overflow: hidden; line-break: anywhere; font-size: 12px; line-height: 14px; } /* .card a { margin-top: auto; } */ /* Media Query for Responsive */ /* @media (max-width: 992px) { .card-posts { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .card-posts { grid-template-columns: repeat(2, 1fr); } } */ .grid-view .only-dafe { display: none; } .list-view .only-dafe { display: none; } .list-view .only-bottom { display: block; width: 100%; } /* List view text lane: always stretch description to card right border on all breakpoints. */ .list-view .view-fgl, .list-view .only-bottom, .list-view .only-bottom > a, .list-view .only-bottom .item-models__text { width: 100%; max-width: 100%; } .list-view .only-bottom > a { display: block; } .list-view .card-body, .list-view .card-snippets, .list-view .section-colium { width: 100%; max-width: 100%; } /* Use full available row width for text column in list-view, then wrap to next line when needed. */ .list-view .card .card-body { padding-right: 0 !important; } .list-view .card-body .d-flex.flex-column.h-100.align-items-start { align-items: stretch !important; } .footer-info .info-text { font-size: 14px; } .seo-text-wrap { background: #FFCBF7; border-radius: 16px; padding: 18px 30px 0px; position: relative; margin-bottom: 25px; margin-top: 15px; word-break: break-all; } .img-block img { width: -webkit-fill-available; object-fit: contain; } /* @media (max-width: 576px) { .card-posts { grid-template-columns: repeat(2, 1fr); } .list-view .card-snippets{ width: 77%; } .view-fgl{ flex-direction: row; } .list-view .card-snippets{ gap: 3px; } .list-view .image-dic { order:1; } .grid-view .only-dafe{ display:none; } .list-view .only-bottom{ display:none; } .list-view .only-dafe{ display:block; } .list-view .item-models__text{ margin-top: 10px; } .card .card-body { flex: 1; padding: 0; } .small.date{ font-size: 11px; font-weight: 700; } } */ /* Row Layout (Optional Toggle View) */ .row-view .card-posts { display: block; /* Switch to row layout */ } .row-view .card { flex-direction: row; } .row-view .card img { width: auto; height: 150px; } /* List View */ .card-posts.list-view { display: block; } /* In list view, each card behaves like a row */ .list-view .card { display: flex; flex-direction: column; margin-bottom: 14.5px; } /* Halve default Bootstrap mt-3 (~1rem) between list ads only (not under menu) */ .card-posts.list-view .card.mt-3:not(:first-child) { margin-top: 0.5rem !important; } .list-view .card .card-body { padding: 0; /* Tight to preview image; grid gap handles breathing room */ padding-left: 3px; } .btn-loadmore { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 14px; line-height: 30px; border-radius: 8px; text-transform: uppercase; box-shadow: 0 4px 4px rgba(0, 0, 0, .25); padding: 10px 35px 9px 35px; font-feature-settings: 'liga' off; background: #FF004C; color: #fff; } .btn-loadmore:hover { background: #FF004C; color: #fff; } /* In grid view, image is on top (5 columns; gutters = 4 × --grid-view-gap) */ .grid-view .card { width: calc((100% - 4 * var(--grid-view-gap)) / 5); display: flex; flex-direction: column; height: auto; } .grid-view .card img { width: 100%; height: 135px; margin-right: 15px; object-fit: cover; } .list-view .card img { width: 500px; height: 149px; margin-right: 0; object-fit: cover; } /* Social inline icons (Teams + local app SVGs): never inherit .card img / .modal-body img sizing */ .card img.social-icon, .list-view .card img.social-icon, .grid-view .card img.social-icon, .row-view .card img.social-icon, .modal-body img.social-icon, .container-single-post img.social-icon, .card img.teams-icon, .list-view .card img.teams-icon, .grid-view .card img.teams-icon, .row-view .card img.teams-icon, .modal-body img.teams-icon, .container-single-post img.teams-icon { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; margin-right: 0; object-fit: contain; flex-shrink: 0; border-radius: 0; } .grid-view .view-gty { flex-direction: column; } .grid-view .col-md-3, .grid-view .col-md-2 { width: 100%; } .grid-view .card-snippets { flex-direction: column; gap: 0px; } .grid-view .view-fgl { flex-direction: column-reverse; flex-wrap: wrap; } .grid-view .only-grid { display: flex; } .list-view .only-grid { display: none !important; } .list-view .only-list { display: flex } .grid-view .only-list { display: none !important; } .grid-view .payment-ckk { position: absolute; bottom: 0px; font-size: 11px; } .grid-view a { color: unset; } .grid-view .featured .card-number, .grid-view .featured .title-name { color: red !important; } .grid-view .col-md-10 { width: 100%; } .grid-view .col-md-9 { width: 100%; } .grid-view .grid-social-phone { /* display: flex; gap:10px; */ display: flex; gap: 0; flex-wrap: wrap; } .list-view .only-grid-block { display: none; } .grid-view .only-grid-block { display: block !important; } .grid-view .date { position: relative; z-index: 1; /* margin-top: -55px; */ /* float: right; */ background-color: white; /* padding: 4px; */ border-radius: 5px; font-size: 11px; margin-bottom: 0px; /* margin-right: -16px; */ } .grid-view .card-body { padding: 3px; } .grid-view .email-text { margin-bottom: 3px; } .list-view .date { margin: 0; margin-left: 10px; font-size: 12px; font-weight: bold; text-transform: uppercase; color: black !important; } .grid-view .featured::after { position: absolute; content: ''; right: -14px; top: auto; /* top: 0; */ bottom: 0; width: 39px; height: 30px; } .grid-view a { text-decoration: auto; font-size: 14px; } .modal-body img { width: 100%; height: auto; } .item-wrap__btn { text-align-last: center; margin-top: -10px; } @media (min-width: 768px) { .col-md-2 { flex: 0 0 auto; width: 12%; } } /* Slider container */ .slider-container { position: relative; width: 100%; /* Fixed width */ height: auto; /* Fixed height */ overflow: hidden; /* Hides the overflow */ margin: 0 auto; /* Centering the slider */ } /* Slider wrapper */ .slider-wrapper { display: flex; transition: transform 0.5s ease; /* Smooth transition */ width: 100%; } /* Each image inside the slider */ .slider-wrapper img { width: 100%; height: fit-content; object-fit: contain; border-radius: 10px; margin-top: 20px; flex-shrink: 0; /* Prevent images from shrinking */ border-radius: 10px; } .slider-wrapper img {} /* Slider control arrows */ .slider-control { position: absolute; top: 50%; /* Align vertically to the middle */ transform: translateY(-50%); /* Center the arrow vertically */ background-color: rgba(0, 0, 0, 0.5); border: none; color: white; font-size: 2rem; /* Bigger arrow size */ padding: 10px; cursor: pointer; z-index: 2; /* Ensure it's on top of the images */ } /* Slider control arrows */ .container-single-post .slider-control { position: absolute; top: 20%; /* Align vertically to the middle */ transform: translateY(-50%); /* Center the arrow vertically */ background-color: rgba(0, 0, 0, 0.5); border: none; color: white; font-size: 2rem; /* Bigger arrow size */ padding: 10px; cursor: pointer; z-index: 2; /* Ensure it's on top of the images */ } /* .slider-item img{ padding: 14px; } */ /* Left arrow */ .modal-body .prev-arrow { left: 0px; } /* Right arrow */ .modal-body .next-arrow { right: 0px; } .container-single-post .prev-arrow { left: 0px; } /* Right arrow */ .container-single-post .next-arrow { right: 0; } /* Disable the button when at the end */ .slider-control:disabled { opacity: 0.5; cursor: not-allowed; } .openPaymentModal { font-size: 12px; font-weight: bold; text-transform: uppercase; } .shadow-sm { border: 2px solid #F8F2FF; box-shadow: 0 7px 14px -2px rgba(0, 0, 0, .04); border-radius: 16px; padding: 10px; margin-bottom: 40px; box-sizing: border-box; z-index: 0; } .grid-view .shadow-sm { margin-bottom: 0; } .shadow-sm.featured { border: 2px solid #ff004d !important; } .section-colium { /* display: flex; */ gap: 10px; } .modal-body a { text-decoration: auto; font-size: 16px; /* line-height: 130%; */ color: #222222; font-weight: 700; } .modal-body .social-icons { display: flex; margin-left: 0px; } .featured .modal-body #modalTitle a { color: red; } .featured .modal-body #modalphone_number a { color: red; } .modal-body #modalDate { text-align: right; vertical-align: top; display: inline-block; font-size: 14px; line-height: 18px; letter-spacing: 1px; font-weight: 500; color: #222222; font-family: "Manrope", sans-serif; } .modal-body.featured::after { right: -54px; } .modal .featured .modal-body #modalemail a { color: #6A11CF; } .modal-body .row { flex-direction: column; } .modal-body .date-modal { margin-top: 5px; margin-bottom: -22px; } .modalDescription { margin-left: 19px; margin-right: 19px; line-break: anywhere; } .featured .modalDescription { margin-left: 19px; margin-right: 19px; line-break: anywhere; color: red; } .modal-body .btn-close { position: absolute; right: 0px; top: 0; padding: 10px; font-size: 10px; } .seo-text-wrap h1 { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 24px; line-height: 24px; color: #000; display: block; margin-bottom: 10px; } .seo-text-wrap h2 { display: block; font-size: 21px; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: 700; unicode-bidi: isolate; } .seo-text-wrap p { font-size: 12px; line-height: 22px; letter-spacing: 1px; color: #000; font-family: "Manrope", sans-serif; font-weight: 400; } /* Header city menu only: keep search input visible when a city is selected (do not apply globally — breaks post-ad section/location where the .item label must show). */ .nav-bot-view .selectize-input.items.has-items > input { display: block !important; } /* City header only: hide duplicate .item so placeholder shows in the input (do not apply to post-ad #multiStepForm) */ .nav-bot-view .selectize-input.items.has-items > .item { display: none !important; } /* Arrow for Selectize: replaced broken border triangle (border-color was unset) */ .selectize-dropdown-content { background-color: #fff; padding: .1rem; height: 40vh !important; z-index: 2000; top: 54px !important; border: none; border-radius: 5px; -webkit-box-shadow: 0 0 35px rgb(140 152 163 / 13%); box-shadow: 0 0 35px rgb(140 152 163 / 13%); } .selectize-dropdown { margin-top: 10px; cursor: pointer; } .selectize-control.single .selectize-input, .selectize-dropdown.single { border-color: #e5e4e4; border: 1px solid #f1f1f1; border-radius: 8px; box-shadow: none; height: 37px; background: #fff; } .selectize-control.single .selectize-input { position: relative; /* Ensure the arrow is positioned relative to the input */ } .selectize-input>input::placeholder { color: #6A11CF; /* Change this color to your desired placeholder color */ font-weight: 900; opacity: 1; /* You can set this to a lower value for transparency */ } .selectize-control.single .selectize-input:after { content: none !important; display: none !important; } .selectize-dropdown:before, .selectize-dropdown.form-control:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #fff transparent; position: absolute; display: block; top: -10px; right: 20%; } .selectize-dropdown [data-selectable].option { opacity: 1; color: #000000; padding: 4px; font-weight: 700; } .selectize-dropdown-content { height: 40vh !important; max-height: 40vh !important; } .selectize-dropdown .active { background-color: transparent; color: #6a11cf !important; } /* * Post-ad step 1 — reference layout (flush on page background). * The original add-new-post.php has no extra wrappers; “outer frames” came from * global .description__text (removed) and from Bootstrap .form-select on the * Selectize wrapper duplicating the inner .selectize-input border. */ #multiStepForm #step1 > .row > .col-md-6 { background: transparent !important; border: none !important; box-shadow: none !important; } #multiStepForm #step1 > .row > .col-md-6 > .mb-3 { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } #multiStepForm #step1 .selectize-control, #multiStepForm #step1 .selectize-control.single { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } #multiStepForm #step1 > .row > .col-md-6:last-child > .mb-3 { display: flex; flex-direction: column; } /* Post ad (step 1): section + location — layout + colours (global sheet so it wins over nav-only selectize hacks) */ #multiStepForm #step1 label[for="section"], #multiStepForm #step1 label[for="location"] { display: block; width: 100%; margin-bottom: 0.5rem; } /* Reserve vertical space (any depth — after init #section / #location may be inside .selectize-control) */ #multiStepForm #step1 .mb-3:has(#section), #multiStepForm #step1 .mb-3:has(#location) { min-height: calc(1.5rem + 36px); } #multiStepForm #step1 .mb-3:has(#section) .selectize-control, #multiStepForm #step1 .mb-3:has(#location) .selectize-control { display: block !important; width: 100% !important; max-width: 100%; } #multiStepForm #step1 .selectize-control.single .selectize-input, #multiStepForm #step1 .selectize-control.single .selectize-input.input-active { min-height: 36px; padding: 8px; font-size: 13px; line-height: 18px; box-sizing: border-box; } /* Same typography + box as Selectize default (13px / 8px padding) before and after init */ #multiStepForm #step1 select#section.form-select, #multiStepForm #step1 select#location.form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none !important; color: #6A11CF; font-weight: 700; font-size: 13px; line-height: 18px; min-height: 36px; height: 36px; padding: 8px; box-sizing: border-box; width: 100%; max-width: 100%; border-radius: 3px; } /* Once wrapped, the native