/* Share link clickable, no break on / */
.share-link-wrap {
margin-top: 10px;
text-align: center;
}
.share-link {
word-break: break-all;
white-space: pre-line;
color: #672d8b;
text-decoration: underline;
font-size: 14px;
cursor: pointer;
}
/* HERO */
.offers-hero {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, #672d8b 0%, #8e44ad 50%, #111 100%);
color: #fff;
padding: 180px 20px 120px;
position: relative;
overflow: hidden;
}
.offers-hero::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
background: #ffffff20;
filter: blur(80px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.offers-hero-content {
max-width: 800px;
position: relative;
z-index: 2;
}
.offers-hero h1 {
font-size: 42px;
margin-bottom: 25px;
}
.offers-hero p {
margin-bottom: 20px;
line-height: 1.6;
opacity: .9;
}
/* Hero features block (white card with shadow and rounded corners) */
.offers-hero-features-block {
display: flex;
justify-content: center;
margin: 48px 0 12px;
/* manje razmaka ispod bloka */
}
.offers-hero-features {
list-style: none;
margin: 0;
padding: 14px 20px;
display: flex;
gap: 22px;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
max-width: 940px;
width: 100%;
box-sizing: border-box;
}
.offers-hero-features li {
font-weight: 600;
color: #222;
white-space: nowrap;
}
/* Success / info message styling (centered, green variant) */
.offer-success {
margin: 16px auto;
max-width: 900px;
padding: 14px 18px;
background: #e6ffed;
border: 1px solid #b7f0c7;
color: #0b7a3a;
border-radius: 10px;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
font-weight: 600;
}
/* Responsive: stack features on small screens */
@media (max-width: 640px) {
.offers-hero-features {
flex-direction: column;
gap: 8px;
padding: 12px;
}
.offers-hero-features li {
white-space: normal;
text-align: center;
}
}
/* Mobile: keep main filters (type + category + apply) on one row */
@media (max-width: 640px) {
.offers-filter {
flex-direction: row;
gap: 8px;
align-items: center;
justify-content: center;
}
.offers-filter>* {
flex: 1 1 auto;
min-width: 0;
}
.offers-filter select,
.offers-filter button {
width: auto;
}
}
/* (cleaned duplicate/malformed rules for .offers-controls removed)
The main .offers-controls block appears later in this file and contains
the intended layout and responsive rules. */
.offers-filter {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 20px;
margin-right: 0;
margin-left: 0;
margin-bottom: 20px;
flex-wrap: wrap;
}
.offers-filter button {
padding: 8px 16px;
border: none;
border-radius: 20px;
background: #eee;
cursor: pointer;
font-family: inherit;
}
.offers-filter button.active {
background: #672d8b;
color: #fff;
}
.modal-content select {
width: 100%;
padding: 12px;
margin-bottom: 6px;
border-radius: 8px;
border: 1px solid #ddd;
font-family: inherit;
appearance: none;
background: #fff;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
}
/* OFFERS GRID */
.offers-container {
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
padding: 60px 20px;
/* Single listing: pull content upwards so buttons, counter and card sit higher */
.offers-container.single-listing {
padding-top: 18px;
/* reduce large top padding for single ad view */
padding-bottom: 40px;
}
.single-listing .listing-meta {
margin-top: 6px;
/* tighten space above actions */
}
.single-listing .offer-card {
margin-top: 6px;
/* slightly lift the card closer to the actions */
}
}
/* CARD */
.offer-card {
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
/* keep options on one line */
flex-wrap: nowrap;
/* Consolidated properties */
text-align: left;
min-width: 0;
/* Radio group error placed under the options */
.offer-type+.field-error.for-offer_type {
display: block;
text-align: center;
margin-top: 6px;
color: #b00020;
font-size: 13px;
}
}
/* Ensure card content is left-aligned (slider, list, preview) - consolidated above */
.offer-preview-modal .offer-card {
text-align: left;
}
.offer-card h3,
.offer-card p,
.offer-card .offer-company,
.offer-card .offer-contact,
.offer-card .offer-meta {
text-align: left;
}
.offer-card .offer-contact {
align-items: flex-start;
}
/* Allow cards to shrink in grid and prevent overflowing long words - consolidated above */
/* Ensure headings, company and id wrap long unbroken strings */
.offer-card h3,
.offer-card .offer-company,
.offer-card .offer-id {
overflow-wrap: anywhere;
word-wrap: break-word;
word-break: break-word;
white-space: normal;
}
/* Aggressive fallback for browsers that don't honor overflow-wrap properly
(apply only to description paragraphs; do NOT force-break headings) */
.offers-container .offer-card p[itemprop="description"],
.offers-preview-grid .offer-card p[itemprop="description"] {
word-break: break-word;
}
.offer-contact {
margin-top: auto;
}
.offer-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
/* Disable hover transform for a card that has been opened (clicked) */
.offer-card.opened:hover {
transform: none !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
/* Inside the preview modal we don't want the card to lift on hover */
.offer-preview-modal .offer-card:hover {
transform: none !important;
box-shadow: none !important;
}
.offer-card h3 {
margin-bottom: 10px;
}
/* COMPANY NAME */
.offer-company {
font-weight: 600;
margin: 4px 0 12px 0;
opacity: .85;
}
.offer-company::after {
content: "";
display: block;
width: 40px;
height: 2px;
background: #672d8b;
margin-top: 6px;
opacity: .25;
}
.offer-contact {
margin-top: 20px;
font-size: 14px;
color: #555;
display: flex;
flex-direction: column;
}
/* MODAL */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
/* KLJUÄŒNO */
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
/* da ne vidi dok je zatvoren */
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.modal.active {
opacity: 1;
pointer-events: auto;
}
/* Consolidated disclaimer styles (base + page-specific overrides) */
.offers-disclaimer {
max-width: 900px;
text-align: center;
font-size: 14px;
line-height: 1.5;
margin-left: auto;
margin-right: auto;
display: block;
padding: 0 12px;
}
/* Single listing actions (share / generate image / close) ------------------------------ */
.single-listing .listing-meta {
text-align: center;
margin-top: 18px;
}
.single-listing .listing-actions-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-direction: column;
}
.single-listing .listing-views {
margin: 0 0 8px 0;
font-size: 14px;
color: #666;
}
.single-listing .listing-actions {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
/* keep on one line */
}
.single-listing .listing-actions>* {
flex: 0 1 auto;
min-width: 0;
padding: 6px 8px;
font-size: 13px;
border-radius: 12px;
}
.single-listing .listing-actions .btn-secondary,
.single-listing .listing-actions a.btn-primary {
white-space: nowrap;
display: inline-flex;
justify-content: center;
align-items: center;
}
/* On very narrow screens allow small horizontal scroll rather than wrapping */
@media (max-width: 360px) {
.single-listing .listing-actions {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}
}
/* Mobile: shrink action buttons so they don't overflow, and place views below actions */
@media (max-width: 640px) {
.single-listing .listing-actions-wrap {
flex-direction: column;
align-items: stretch;
}
.single-listing .listing-actions {
gap: 8px;
order: 1;
justify-content: space-between;
}
.single-listing .listing-actions>* {
flex: 0 1 auto;
min-width: 0;
padding: 8px 10px;
font-size: 14px;
border-radius: 14px;
}
.single-listing .listing-actions .btn-primary,
.single-listing .listing-actions .btn-secondary,
.single-listing .listing-actions a.btn-primary {
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 13px;
padding: 6px 10px;
}
.single-listing .listing-views {
order: 2;
margin-top: 8px;
text-align: center;
}
}
/* Ensure button labels do not wrap on small screens; slightly reduce font if needed */
@media (max-width: 640px) {
.single-listing .listing-actions .btn-primary,
.single-listing .listing-actions .btn-secondary,
.single-listing .listing-actions a.btn-primary {
white-space: nowrap;
font-size: 12px;
/* small reduction to avoid wrapping while keeping button size */
}
}
/* Mobile: raise entire single-listing block (buttons, counter, card) upward */
@media (max-width: 640px) {
.offers-container.single-listing {
padding-top: 0;
/* pull whole page content closer to header */
padding-bottom: 24px;
}
.single-listing .listing-meta {
margin-top: 2px;
}
.single-listing .listing-actions-wrap {
gap: 6px;
}
.single-listing .offer-card {
margin-top: 0;
}
/* Move both the actions block and the card up together on mobile */
.single-listing .listing-meta,
.single-listing .offer-card {
transform: translateY(-36px);
}
}
/* Index preview variant */
.offers-preview .offers-disclaimer {
margin-top: 20px;
margin-bottom: 12px;
color: #666;
}
/* Hero-area variant (kept for clarity) */
.offers-hero .offers-disclaimer {
margin-top: 20px;
margin-bottom: 12px;
}
/* Callout shown at the top of the hero on oglasi.php */
.offers-hero .offers-callout {
color: #000;
font-size: 18px;
font-weight: 700;
text-align: center;
margin: 0 12px 10px 12px;
}
.modal-content {
background: white;
padding: 40px;
border-radius: 16px;
max-height: 80vh;
overflow-y: auto;
width: 90%;
max-width: 500px;
/* Make content a column so the close button can stick to the top
while the inner content scrolls. This keeps the "x" visible. */
display: flex;
flex-direction: column;
position: relative;
}
.modal-content h2 {
margin-bottom: 20px;
}
.modal,
.offer-preview-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
z-index: 2000;
}
.modal.active,
.offer-preview-modal.active {
opacity: 1;
pointer-events: auto;
}
/* FORM */
.modal-content input,
.modal-content textarea {
width: 100%;
padding: 12px;
margin-bottom: 6px;
border-radius: 8px;
border: 1px solid #ddd;
font-family: inherit;
}
.modal-content textarea {
resize: vertical;
min-height: 120px;
}
.modal-content button {
width: 100%;
background: #672d8b;
color: white;
border: none;
padding: 14px;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: .25s;
}
.modal-content button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(103, 45, 139, 0.3);
}
/* Disabled submit appearance: lighter and not clickable */
.modal-content button[disabled],
.modal-content input[disabled] {
opacity: 0.65;
filter: saturate(0.95) brightness(1.05);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* Inline helper message shown when submit is disabled */
.form-required-note {
font-size: 13px;
color: #b00020;
margin-top: 10px;
text-align: center;
}
/* CLOSE BUTTON: keep visible while modal-content scrolls */
.close {
position: sticky;
top: 15px;
/* place at the right side of the modal header area */
align-self: flex-end;
cursor: pointer;
font-size: 24px;
z-index: 10;
background: transparent;
border: none;
/* move slightly to the right so it's nearer the scrollbar
and doesn't cover form fields when content scrolls */
transform: translateX(10px);
/* add subtle background to remain legible over inputs */
background: #fff;
border-radius: 50%;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* Keep the close button within bounds on small screens */
@media (max-width: 480px) {
.modal-content {
padding: 24px;
}
.close {
transform: translateX(0);
top: 10px;
width: 32px;
height: 32px;
font-size: 20px;
}
}
.offers-seo {
max-width: 900px;
margin: 40px auto 0 auto;
padding: 0 20px;
text-align: center;
}
.offers-seo h2 {
margin-bottom: 20px;
}
/* Make focused offers heading show a subtle, branded focus ring (accessible).
Hide the browser's default focus outline and show our ring only when
the element is keyboard-focused (`:focus-visible`). */
/* Remove any visual focus indicator on the offers heading (user requested).
This will prevent the outline/box from appearing even after navigation or refresh. */
#oglasi-heading:focus,
.offers-title:focus,
#oglasi-heading:focus-visible,
.offers-title:focus-visible,
#oglasi-heading::-moz-focus-inner,
.offers-title::-moz-focus-inner {
outline: none !important;
box-shadow: none !important;
border: 0 !important;
}
.offers-seo p {
margin-bottom: 15px;
line-height: 1.6;
}
/* CATEGORY BADGE */
.offer-category {
display: inline-block;
background: #672d8b;
color: #fff;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
margin-bottom: 10px;
}
/* DATE */
.offers-preview-text strong {
font-size: inherit;
font-weight: 700;
}
.offer-date {
opacity: .7;
font-size: 13px;
}
/* CONTACT BUTTON */
.offer-btn {
display: inline-block;
margin-top: 15px;
padding: 10px 18px;
background: #672d8b;
color: #fff;
text-decoration: none;
border-radius: 20px;
font-size: 14px;
transition: .25s;
}
.offer-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(103, 45, 139, 0.3);
}
.offer-note {
font-size: 13px;
line-height: 1.4;
color: #666;
margin-top: 4px;
margin-bottom: 12px;
text-align: center;
}
/* SUCCESS MESSAGE */
.form-success {
max-width: 900px;
margin: 40px auto 0 auto;
padding: 15px 20px;
background: #e9f7ef;
color: #1e7e34;
border-radius: 10px;
text-align: center;
font-size: 15px;
}
.char-counter {
font-size: 12px;
color: #777;
margin-top: 2px;
margin-bottom: 2px;
text-align: left;
margin-left: 0;
}
.char-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.char-meta .char-counter {
text-align: left;
}
.char-meta .field-error {
margin-top: 2px;
color: #666;
font-size: 12px;
}
#description {
margin-bottom: 4px;
}
.field-error {
display: block;
color: #666;
margin-top: 0px;
margin-bottom: 4px;
font-size: 12px;
line-height: 1.1;
}
/* field error visual state */
.field-error.error {
color: #b00020;
display: block;
}
.input-error {
border-color: #b00020 !important;
box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.06);
}
/* HONEYPOT */
.honeypot {
display: none;
}
/* MOBILE */
@media (max-width:768px) {
.offers-controls>button#resetFiltersBtn {
flex: 1 1 100% !important;
order: 4 !important;
margin-top: 6px !important;
box-sizing: border-box !important;
}
.offers-controls>button#applyFiltersBtn {
flex: 1 1 100% !important;
order: 3 !important;
margin-top: 6px !important;
box-sizing: border-box !important;
}
/* Force visibility in case another rule hides/squeezes it */
.offers-controls>button#resetFiltersBtn {
display: block !important;
width: 100% !important;
visibility: visible !important;
opacity: 1 !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
}
.modal-content {
padding: 30px;
}
/* DISCLAIMER */
.offers-page .offers-disclaimer {
max-width: 900px;
margin: 20px auto 12px auto;
/* match index spacing */
padding: 0 20px;
text-align: center;
font-size: 14px;
line-height: 1.6;
color: #fff;
}
.offers-page .offers-disclaimer a {
color: #fff;
text-decoration: underline;
font-weight: 500;
}
.offers-page .offers-disclaimer a:hover {
color: #ffd700;
}
/* BADGE */
.offer-card[data-featured="1"]::before {
/* INLINE-SVG STAR (black stroke + gold fill) - easier to get same look on mobile/desktop
To revert: restore content to "⭐ ISTAKNUTO" and remove the adjacent ::first-letter rule. */
content: url("data:image/svg+xml;utf8,") " ISTAKNUTO";
position: absolute;
top: -12px;
right: 15px;
background: #ffd700;
color: #000;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
display: inline-flex;
/* ensure svg and text are vertically centered */
align-items: center;
gap: 8px;
}
.offer-card[data-featured="1"]:hover {
transform: translateY(-12px) scale(1.05);
box-shadow: 0 20px 40px rgba(255, 215, 0, 0.35);
}
.offer-card[data-featured="1"] {
border: 2px solid #ffd700;
box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
position: relative;
transition: all 0.3s ease;
}
/* hide the literal Unicode star in the element text (template still contains '⭐ ISTAKNUTO')
the ::before now provides the SVG star + text */
.offer-card[data-featured="1"]::first-letter {
display: none;
}
/* keep badge-first-letter rule for other usages (admin) below, unchanged */
.badge.featured::first-letter {
color: #ff8a00;
}
/* Featured slider removed - styles cleaned up to avoid unused selectors. */
.trust-box {
max-width: 900px;
margin: 40px auto 20px auto;
background: #fff;
padding: 20px 25px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
text-align: center;
line-height: 1.8;
font-size: 15px;
color: #333;
}
/* === TIP OGLASA (CENTER + CLEAN) === */
.offer-type {
margin-top: 15px;
display: flex;
justify-content: flex-start;
/* align options to the left block */
gap: 18px;
flex-wrap: wrap;
text-align: left;
}
.offer-option {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
white-space: nowrap;
/* 🔥 NE PRELAMA TEKST */
}
/* Ensure radio and label text stay on the same line and the text is left-aligned
on narrow Safari/iOS where default rendering can differ */
.offer-option input[type="radio"] {
flex: 0 0 auto;
margin: 0;
margin-right: 6px;
}
.offer-option span {
display: inline-block;
flex: 1 1 auto;
min-width: 0;
text-align: left;
/* keep the label on a single line; truncate with ellipsis if it overflows */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Ensure visible, consistent text color and sane input sizing on Android/Safari
Some mobile browsers apply form-control color or appearance that can hide
inline label text when nested inside modal overlays. Make rules explicit. */
.modal-content,
.modal-content .offer-type,
.offer-option,
.offer-option span {
color: #222 !important;
font-size: 14px;
line-height: 1.2;
}
.offer-option input[type="radio"] {
-webkit-appearance: radio;
appearance: radio;
width: auto;
height: auto;
}
/* Defensive: ensure label doesn't collapse on some Android WebViews */
.offer-option {
min-width: 0;
}
.featured-pricing-box {
margin-top: 10px;
padding: 10px;
border-radius: 8px;
background: #f7f7f7;
display: none;
/* ostaje zbog JS */
}
/* Slightly smaller, more discreet note for featured pricing */
.featured-pricing-box .featured-note {
font-size: 13px;
color: #4a4a4a;
/* softer black */
line-height: 1.4;
margin-bottom: 8px;
font-weight: 500;
}
/* SVAKA OPCIJA U RED */
.featured-pricing-box label {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
margin-bottom: 6px;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s ease;
}
.featured-pricing-box label:hover {
background: #eee;
}
/* LEVA STRANA (radio + tekst) */
.featured-pricing-box label span:first-child {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
/* 🔥 OVO rešava lomljenje "30 dana" */
font-size: 13px;
/* 🔽 manji tekst */
}
.featured-pricing-box label span:last-child {
font-size: 13px;
/* smanji cenu */
}
.featured-pricing-box input[type="radio"] {
position: relative;
top: 5px;
/* pomeri dole malo */
}
/* ID OGLASA */
.offer-id {
font-size: 11px;
color: #672d8b;
margin-bottom: 10px;
font-weight: 600;
}
.offer-card p[itemprop="description"] {
margin-bottom: 10px;
}
/* PREVIEW MODAL FIX */
.offer-preview-content .offer-card {
max-width: 500px;
margin: auto;
}
.offer-preview-content {
padding: 20px;
}
/* SHARE PANEL + BUTTON */
.share-btn {
margin-left: 10px;
}
#sharePanel.share-panel {
position: relative;
margin-top: 14px;
display: block;
}
.share-panel .share-panel-inner {
background: #fff;
border-radius: 12px;
padding: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.share-panel .share-panel-inner a,
.share-panel .share-panel-inner button {
padding: 8px 12px;
background: #f4f4f4;
border-radius: 8px;
border: none;
color: #333;
text-decoration: none;
cursor: pointer;
}
.share-panel .share-panel-inner .share-close {
position: absolute;
right: 8px;
top: 6px;
background: transparent;
font-size: 20px;
}
@media (max-width:768px) {
.share-panel .share-panel-inner {
padding: 10px;
gap: 6px;
}
}
/* share-qr-wrap and .share-qr removed */
/* SAMO KARTICE (NE MODAL) */
.offers-container .offer-card p[itemprop="description"],
.offers-preview-grid .offer-card p[itemprop="description"] {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
/* MODAL ? FULL TEKST */
.offer-preview-content .offer-card p[itemprop="description"] {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
white-space: normal;
word-break: break-word;
}
/* Single listing page: show full description (do not truncate to 3 lines) */
.offers-container.single-listing .offer-card p[itemprop="description"] {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
white-space: normal !important;
word-break: break-word !important;
}
/* Removed featured-track specific truncation; remaining selectors above handle truncation. */
.offer-type-badge {
display: inline-block;
font-size: 11px;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 10px;
font-weight: 600;
}
/* PONUDA */
.offer-type-badge.ponuda {
background: #e8f5e9;
color: #2e7d32;
}
/* POTRA�NJA */
.offer-type-badge.potraznja {
background: #fff3e0;
color: #ef6c00;
}
.offers-search {
display: flex;
justify-content: center;
margin: 12px 0 24px;
}
.offers-search input {
width: 320px;
max-width: 92%;
padding: 10px 14px;
border-radius: 20px;
border: 1px solid #e3e3e3;
font-family: inherit;
outline: none;
}
.offers-search input:focus {
box-shadow: 0 6px 18px rgba(103, 45, 139, 0.12);
border-color: #672d8b;
}
.pagination {
text-align: center;
margin: 40px 0;
}
.pagination a {
display: inline-block;
margin: 0 5px;
padding: 8px 14px;
border-radius: 8px;
text-decoration: none;
background: #eee;
color: #333;
font-weight: 500;
}
.pagination a.active {
background: #672d8b;
color: #fff;
}
.pagination a:hover {
background: #672d8b;
color: #fff;
}
#noResultsMessage {
display: none;
width: 100%;
text-align: center;
margin-top: 30px;
font-size: 15px;
color: #777;
}
/* Back-to-top (offers) floating button */
.back-to-top {
position: fixed;
right: 18px;
bottom: 18px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--primary);
color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(103, 45, 139, 0.18);
z-index: 1200;
}
.back-to-top:focus {
outline: 3px solid rgba(103, 45, 139, 0.18);
}
@media (min-width:1024px) {
/* on large screens keep it unobtrusive */
.back-to-top {
right: 32px;
bottom: 32px;
}
}
body>.offers-container {
margin-top: 120px;
}
.offers-hero-logo {
display: flex;
justify-content: center;
margin-bottom: 20px;
overflow: hidden;
}
/* Extra override for small-to-medium phones to ensure identical visual size */
@media (max-width: 600px) {
.offers-controls>button#resetFiltersBtn,
.offers-controls>button#applyFiltersBtn {
flex: 1 1 100% !important;
min-width: 100% !important;
width: 100% !important;
padding: 12px 20px !important;
font-size: 15px !important;
border-radius: 20px !important;
margin: 6px 0 !important;
}
}
.offers-hero-logo img {
max-width: 240px;
width: 100%;
opacity: 0;
transform: translateY(20px) scale(0.95);
animation: fadeUp 1s ease forwards, slowZoom 6s ease-in-out infinite;
}
/* ulazna animacija */
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* blagi zoom (kao na index) */
@keyframes slowZoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
html {
scroll-behavior: smooth;
}
.offers-title {
text-align: center !important;
width: 100%;
margin: 40px 0 20px;
font-size: 24px;
color: #222;
}
.offers-title::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: #672d8b;
margin: 10px auto 0;
border-radius: 2px;
}
/* Ensure offers headings are centered on desktop and mobile (final override) */
.offers-title,
.offers-preview h2,
#oglasi-heading {
display: block !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
.offers-controls {
max-width: 1000px;
margin: 20px auto 30px auto;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
padding: 10px;
border-radius: 50px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* dropdown */
.offers-controls select {
padding: 10px 14px;
border-radius: 20px;
border: 1px solid #ddd;
font-family: inherit;
background: #fff;
cursor: pointer;
}
/* SEARCH NAJVAŽNIJE */
.offers-controls input {
flex: 1;
/* 🔥 ovo ga širi */
padding: 10px 14px;
border-radius: 20px;
border: 1px solid #ddd;
font-family: inherit;
outline: none;
}
/* fokus efekat */
.offers-controls input:focus {
border-color: #672d8b;
box-shadow: 0 0 0 2px rgba(103, 45, 139, 0.1);
}
/* dugme */
#applyFiltersBtn {
padding: 10px 20px;
background: #672d8b;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
font-weight: 600;
transition: 0.2s;
}
#applyFiltersBtn:hover {
background: #53236f;
transform: translateY(-1px);
}
/* Reset button (secondary) — white variant to match primary but inverted */
.btn-secondary,
#resetFiltersBtn {
padding: 10px 20px;
background: #ffffff;
color: #672d8b;
border: 1px solid #e6e6e6;
border-radius: 20px;
cursor: pointer;
font-weight: 600;
font-size: 15px;
font-family: inherit;
line-height: 1.1;
transition: 0.15s;
box-shadow: 0 6px 14px rgba(103, 45, 139, 0.06);
}
.btn-secondary:hover,
#resetFiltersBtn:hover {
background: #f7f5fb;
transform: translateY(-1px);
}
@media (max-width: 320px) {
.offers-controls {
flex-direction: column;
border-radius: 20px;
}
.offers-controls select,
.offers-controls input,
#applyFiltersBtn {
width: 100%;
}
}
/* Ensure on small-to-medium phones the two selects fit side-by-side */
@media (max-width: 440px) {
.offers-controls {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
align-items: center !important;
}
.offers-controls>select {
flex: 1 1 48% !important;
padding: 8px 10px !important;
font-size: 14px !important;
border-radius: 14px !important;
box-sizing: border-box !important;
max-width: 48% !important;
}
.offers-controls>input[type="search"] {
flex: 1 1 100% !important;
order: 3 !important;
margin-top: 6px !important;
}
.offers-controls>button#applyFiltersBtn {
flex: 1 1 100% !important;
order: 4 !important;
}
}
/* Ensure reset + apply are visible on small phones: reset smaller, apply larger below search */
@media (max-width: 440px) {
.offers-controls>input[type="search"] {
order: 2 !important;
}
.offers-controls>button#resetFiltersBtn {
flex: 0 0 30% !important;
order: 4 !important;
margin-top: 6px !important;
}
.offers-controls>button#applyFiltersBtn {
flex: 1 1 68% !important;
order: 3 !important;
margin-top: 6px !important;
}
}
.btn-primary {
display: inline-block;
padding: 14px 28px;
border-radius: 30px;
background: #672d8b;
color: #fff;
font-weight: 600;
font-size: 15px;
font-family: 'Syne', sans-serif;
text-decoration: none;
border: none;
cursor: pointer;
transition: 0.25s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(103, 45, 139, 0.3);
}
.offers-hero-extra {
display: flex;
flex-direction: column;
align-items: center;
}
.offers-hero-extra .btn-primary {
margin-top: 8px;
/* keep flow spacing */
position: relative;
/* allow visual shift without affecting document flow */
top: -10px;
/* visually move button up towards the descriptive text above */
}
@media (max-width: 640px) {
.offers-hero-extra .btn-primary {
margin-top: 8px;
position: relative;
top: -14px;
/* a bit more lift on small screens */
}
}
#addOfferBtn {
box-shadow: 0 10px 25px rgba(103, 45, 139, 0.4);
}
/* Preview modal: close 'x' button on card (top-right) */
.offer-preview-modal .offer-card {
position: relative;
}
.offer-preview-modal .offer-preview-close {
position: absolute;
/* raised a bit (half of previous shift) so it still clears the badge */
top: 19px;
right: 12px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
}
.offer-preview-modal .offer-preview-close:hover {
background: rgba(0, 0, 0, 0.8);
}
/* Final override: make both filter buttons identical on small phones */
@media (max-width: 480px) {
.offers-controls>button#resetFiltersBtn,
.offers-controls>button#applyFiltersBtn {
display: block !important;
width: 100% !important;
padding: 12px 20px !important;
font-size: 15px !important;
border-radius: 20px !important;
box-sizing: border-box !important;
text-align: center !important;
margin-top: 6px !important;
}
.offers-controls>button#resetFiltersBtn {
order: 3 !important;
}
.offers-controls>button#applyFiltersBtn {
order: 4 !important;
}
}
/* Ensure listing meta (views + close button) sits under the card and spans full grid width */
.offers-container .listing-meta {
grid-column: 1 / -1;
text-align: center;
margin-top: 18px;
}
/* Single listing view: center the card and stack meta below it */
.offers-container.single-listing {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.offers-container.single-listing .offer-card {
width: 100%;
max-width: 900px;
}
.offers-container.single-listing .listing-meta {
grid-column: auto;
width: 100%;
max-width: 900px;
margin-top: 18px;
}
/* Final override: ensure apply button appears before reset on small screens
This block is placed at the end to override earlier conflicting rules. */
@media (max-width: 768px) {
.offers-controls>input[type="search"] {
order: 2 !important;
}
.offers-controls>button#applyFiltersBtn {
order: 3 !important;
}
.offers-controls>button#resetFiltersBtn {
order: 4 !important;
}
}
@media (max-width: 440px) {
.offers-controls>input[type="search"] {
order: 2 !important;
}
.offers-controls>button#applyFiltersBtn {
order: 3 !important;
}
.offers-controls>button#resetFiltersBtn {
order: 4 !important;
}
}
/* Make the controls wrap earlier (when hamburger menu appears) so they
stack nicely instead of remaining on a single line. This ensures the
filter row behaves like mobile even on narrower desktops/tablets. */
@media (max-width: 768px) {
.offers-controls {
flex-wrap: wrap !important;
gap: 8px !important;
align-items: center;
}
.offers-controls>select,
.offers-controls>input[type="search"],
.offers-controls>button#applyFiltersBtn,
.offers-controls>button#resetFiltersBtn {
flex: 1 1 100% !important;
width: 100% !important;
margin-top: 6px !important;
}
/* Keep selects side-by-side when there's slightly more width; later
more-specific rules (<=440px) will override as needed. */
.offers-controls>select {
flex: 1 1 48% !important;
max-width: 48% !important;
}
.offers-controls>button#resetFiltersBtn {
flex: 1 1 40% !important;
max-width: 40% !important;
}
.offers-controls>button#applyFiltersBtn {
flex: 1 1 58% !important;
max-width: 58% !important;
}
}