/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Nature background with overlay */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('https://cdn.pixabay.com/photo/2024/04/10/22/52/autumn-8688876_1280.jpg') no-repeat center center fixed;
  background-size: cover;
  color: white;
  line-height: 1.4;
  font-size: 14px;
  padding: 15px;
}

/* Header */
header {
  background-color: rgba(30, 144, 255, 0.9);
  color: white;
  padding: 20px 15px;
  text-align: center;
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

header h1 {
  margin-bottom: 10px;
  font-size: 1.6em;
}

header .post-button {
  margin-bottom: 10px;
  display: inline-block;
}

.desktop-nav,
.mobile-nav {
  margin-top: 10px;
}

/* Navigation Buttons */
.post-button,
.home-button {
  display: inline-block;
  padding: 8px 14px;
  margin: 5px;
  background-color: #6c757d;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9em;
}

.post-button {
  background-color: #ff9800;
}

.post-button:hover {
  background-color: #e68900;
}

.home-button:hover {
  background-color: #5a6268;
}

/* Desktop and Mobile Navigation Toggle */
@media (max-width: 600px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mobile-nav a {
    margin: 5px 0;
    padding: 8px 12px;
    background-color: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
  }

  .mobile-nav a:hover {
    background-color: #5a6268;
  }
}

@media (min-width: 601px) {
  .mobile-nav {
    display: none;
  }
}

/* 1) Do NOT style every form as a card */
.form-container, .auth-container, .listing-item, .listing-page, .container, .contact-form {

  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border-radius: 8px;
  padding: 15px;
}

.container { max-width: 1100px; margin: 0 auto; }

/* Filter form */
.filter-form {
  text-align: center;
  margin-bottom: 20px;
}

.filter-form select,
.filter-form button,
.filter-form input[type="text"] {
  padding: 6px 10px;
  font-size: 0.9em;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin: 4px;
}

.filter-form button {
  background-color: #007bff;
  color: white;
  border: none;
}

.filter-form button:hover {
  background-color: #0056b3;
}

/* Ads grid */
.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

/* Listing card */
.listing-card {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  border-left: 4px solid #007bff;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.1s ease;
}

.listing-card:hover {
  transform: scale(1.01);
}

.listing-card h2 {
  font-size: 1em;
  margin: 6px 0;
  color: #1e90ff;
}

.listing-card .price {

  color: #28a745;
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: 4px;
}

.listing-card .category {
  font-size: 0.75em;
  color: #666;
  margin-bottom: 4px;
}

.listing-card img.listing-image {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
}

/* Listing detail page image */
.listing-page .listing-image {
  width: 100%;
  max-width: 320px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 15px;
  border-radius: 6px;
}

/* Contact info */
.contact-info {
  font-size: 0.85em;
  margin-top: 8px;
}

.contact-info a {
  color: #007bff;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* Input styles */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 8px;
  font-size: 0.9em;
  margin: 6px 0 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #1e90ff;
  box-shadow: 0 0 4px rgba(30,144,255,0.25);
}

/* Buttons */
button,
input[type="submit"] {
  background-color: #28a745;
  color: white;
  padding: 8px 14px;
  font-size: 0.9em;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
  background-color: #218838;
}

/* Footer */
footer {
  text-align: center;
  margin-top: 30px;
  font-size: 0.8em;
  color: #eee;
}

/* Pagination Fix */
.pagination {
  text-align: center;
  margin-top: 30px;
}

.pagination a,
.pagination .current {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 4px;
  background-color: rgba(255, 255, 255, 0.85);
  color: #333;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pagination a:hover {
  background-color: #1e90ff;
  color: #fff;
}

.pagination .current {
  background-color: #6c757d;
  color: white;
  cursor: default;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .listings-grid{
    grid-template-columns: 1fr;
  }

  .filter-form select,
  .filter-form button,
  .filter-form input[type="text"] {
    width: 90%;
    margin: 6px auto;
    display: block;
  }

  .listing-card img.listing-image {
    height: 140px;
  }

  .listing-page .listing-image {
    max-width: 100%;
    height: auto;
  }
}

/* SOLD label */
.sold-banner {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ffc107;
  color: #333;
  padding: 4px 10px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 0.8em;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


.tab-btn {
  padding: 8px 14px;
  margin: 0 6px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.9em;
}

.tab-btn:hover {
  background-color: #5a6268;
}

.tab-btn.active {
  background-color: #007bff;
  box-shadow: 0 0 4px rgba(0,123,255,0.5);
}

.message-list {
  margin-top: 15px;
}

.message-card {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message-card.unread {
  border-left: 4px solid #007bff;
  background-color: #f1f9ff;
}

.new-badge {
  background-color: #28a745;
  color: white;
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  font-weight: bold;
}

.action-btn {
  background-color: #007bff;
  padding: 6px 10px;
  font-size: 0.85em;
  border-radius: 4px;
  border: none;
  color: white;
  margin-right: 6px;
  cursor: pointer;
}

.action-btn.danger {
  background-color: #dc3545;
}

.action-btn:hover {
  opacity: 0.9;
}

.listing-card.new {
  animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Responsive adjustments for message cards */
@media (max-width: 600px) {
  .message-card {
    padding: 10px;
    font-size: 0.9em;
  }

  .message-card h3 {
    font-size: 1em;
  }

  .action-btn {
    padding: 4px 8px;
    font-size: 0.8em;
  }
}
.new-listings-badge {
  background-color: #28a745;
  color: white;
  font-weight: bold;
  padding: 8px 14px;
  text-align: center;
  border-radius: 6px;
  margin-bottom: 12px;
  animation: fadeInOut 4s ease-in-out;
}

@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(-10px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.hidden {
  display: none !important;
}

/* Smaller listing image size on phones */
@media (max-width: 600px) {
  .listing-card img.listing-image {
    height: 110px;
  }
}

@media (max-width: 600px) {
  .message-card .action-btn {
    display: block;
    width: 100%;
    margin: 6px 0;
  }
}

/* Contact form styles */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}

footer.footer {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
  font-size: 0.9em;
  color: #aaa;
}
footer.footer a {
  color: #aad4ff;
  text-decoration: underline;
}
footer.footer a:hover {
  color: #ffffff;
}

/* ==== Bulk selection styling ==== */
.bulk-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

/* Make the whole label a comfy tap target */
label.bulk-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #eef5ff;            /* soft blue pill */
  cursor: pointer;
  user-select: none;
}

/* Bigger, easier-to-tap checkboxes */
input[type="checkbox"].bulk-checkbox {
  transform: scale(1.4);           /* reliable across browsers */
  transform-origin: center;
}

/* Give each group its own accent color */
.chk-received { accent-color: #007bff; }  /* primary blue */
.chk-sent     { accent-color: #6f42c1; }  /* purple */
.chk-selectall{ accent-color: #17a2b8; }  /* teal */
.chk-trash { accent-color: #dc3545; } /* red for Trash */


/* Keyboard focus ring */
input[type="checkbox"].bulk-checkbox:focus-visible,
label.bulk-check:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}


/* === My Ads: actions row (Edit / Mark as Sold / Delete) === */
.listing-actions{
  display: flex;
  flex-wrap: wrap;        /* allow wrap on small screens */
  gap: .6rem;             /* space between buttons */
  align-items: center;
  margin-top: 8px;
}

/* Make links/buttons look like neat pills and keep icon + text together */
.listing-actions a,
.listing-actions button{
  display: inline-flex;
  align-items: center;
  gap: .35rem;            /* space between emoji/icon and text */
  padding: .55rem .8rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #007bff;         /* keep the “action” look */
  text-decoration: none;
  white-space: nowrap;    /* avoid label breaking in two lines */
  font-weight: 600;
}

.listing-actions button{ cursor: pointer; }

/* Optional color hint for Delete */
.listing-actions .danger{
  color: #dc3545;
  border-color: #f1b0b7;
}

/* Remove default margins some browsers add to forms */
.listing-actions form{ margin: 0; }

/* On very small phones, switch to a tidy 2-column grid */
@media (max-width: 420px){
  .listing-actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }
  .listing-actions a,
  .listing-actions button{
    width: 100%;
    justify-content: center;
  }
}

/* === Listing page: top bar with views/favorites + Favorite button === */
.listing-topbar{
  display:flex;
  flex-wrap:wrap;                 /* allow wrap on small screens */
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin-bottom:10px;
}

/* counts on the left */
.listing-stats{
  color:#555;
  font-size:.9em;
  white-space:nowrap;
}

/* nice pill button */
.favorite-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.55rem .8rem;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#28a745;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}

/* if the old code used absolute/fixed, neutralize it on phones */
@media (max-width: 600px){
  .listing-topbar{ display:grid; grid-template-columns: 1fr; }
  .favorite-btn{ width:100%; justify-content:center; }

  /* safety net: force any old positioning off */
  .favorite-btn.fixed,
  .favorite-btn.absolute{
    position: static !important;
    top:auto !important; right:auto !important; left:auto !important;
  }
}

/* Mobile fix: prevent the Favorite block from overlapping */
@media (max-width: 600px){
  .listing-fav-block{
    position: static !important;   /* stop absolute positioning on phones */
    top: auto !important;
    right: auto !important;
    text-align: right;
    margin: 10px 0;
    z-index: 1;
  }
  /* neutralize the global 'form' card styling inside this block on phones */
  .listing-fav-block form{
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: inline-block;
  }
}

/* Inbox/Trash: keep action forms transparent so they don't overlay buttons */
.message-card form{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Make the big action buttons clean on phones (you already set most of this) */
@media (max-width: 600px){
  .message-card .action-btn{
    display: block;
    width: 100%;
    margin: 8px 0;
    border-radius: 10px;
  }
  .message-card .action-btn::before,
  .message-card .action-btn::after{
    content: none !important; /* just in case there are decorative pseudos */
  }
}

/* Admin-only "Deleted" sticker for ad cards */
.deleted-banner{
  position: absolute;
  top: 8px;
  right: 8px;
  background: #dc3545;
  color: #fff;
  padding: 4px 10px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 0.8em;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Slightly dim deleted cards when an admin is viewing */
.is-deleted { opacity: .85; filter: grayscale(10%); }


@media (max-width: 600px) {
  body { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.listing-item { position: relative; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0;
}

img { max-width: 100%; height: auto; display: block; }

a:focus-visible,
button:focus-visible,
.action-btn:focus-visible {
  outline: 2px solid #1e90ff;
  outline-offset: 2px;
}

.listing-card h2,
.listing-card h3 {
  font-size: 1em;
  margin: 6px 0;
  color: #1e90ff;
}

/* ensure your card container is positioned */
.ad-card { position: relative; }

/* small pill badge */
.country-badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .5rem;
  font-size: .75rem;
  line-height: 1;
  border-radius: 9999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.country-badge .flag { font-size: 1rem; }
.country-badge .label {
  white-space: nowrap;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* a slightly larger version for the ad page */
.country-badge--lg {
  top: 0; right: 0;
  font-size: .875rem;
  padding: .35rem .6rem;
}


/* ===== Payment page: scoped safety tweaks ===== */
body.page-payment { 
  overflow-x: hidden;               /* stop any sideways scroll */
}

/* keep PayPal area 100% width on all devices */
body.page-payment #paypal-button-container,
body.page-payment iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* inputs >=16px to avoid iOS focus zoom */
body.page-payment input,
body.page-payment select,
body.page-payment textarea,
body.page-payment button {
  font-size: 16px;
}

/* on phones, hide bulky header/nav ONLY for the payment page */
@media (max-width: 600px) {
  body.page-payment header,
  body.page-payment .desktop-nav,
  body.page-payment .mobile-nav,
  body.page-payment .sidebar,
  body.page-payment .left-panel,
  body.page-payment .nav-drawer {
    display: none !important;
  }
}

/* ensure the payment card stays comfy and centered from global CSS pov */
body.page-payment .container {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}


/* 1) Make sure it never gets too small (nudge up a bit) */
.page-payment .fitbox-scaler {
  /* if you used Option B already, bump the floor slightly */
  --scale: clamp(0.95, min(1, min(var(--sx), var(--sy))), 1);
  will-change: transform; /* smoother scaling */
}

/* 2) A gentle text bump on this page only */
body.page-payment { font-size: 15px; } /* try 15.5px if you like */

/* 3) Respect notches/safe areas (iPhone) */
@supports(padding: env(safe-area-inset-top)) {
  body.page-payment {
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* 4) Extra tiny devices: reduce inner padding so everything breathes */
@media (max-width: 360px) {
  .page-payment .container.fitbox { padding: 14px; }
  .page-payment h1 { font-size: 21px; }
}

/* 5) If you want the header visible on phones (but small), use this instead of hiding it */
@media (max-width: 600px) {
  body.page-payment header {
    display: block !important;
    padding: 10px 12px;
    border-radius: 8px;
  }
  body.page-payment header h1 { font-size: 1.1rem; margin: 0; }
  /* keep nav compact */
  body.page-payment .desktop-nav,
  body.page-payment .mobile-nav { display: none !important; }
}