/* Post Classified Ad - Start : 60:40 two-column layout === */
.post-ad-layout {
  display: grid;
  grid-template-columns: 3fr 2fr; /* ~60:40 */
  gap: 24px;
  width: 100%;
  margin: 16px auto;
  /*margin-left: 60px;*/
  margin-left: 0 !important;
  padding-left: 60px;
}
.post-ad-layout > .col-left,
.post-ad-layout > .col-right{
  min-width: 0;
}
.post-ad-layout .col-left > * + * {
  margin-top: 16px;
}
.post-ad-layout .content {
  margin-left: 0;
  padding: 0;
}
.post-ad-layout .col-right {
  align-self: start;
  position: sticky;
  top: 88px;
  padding-right: 8px;
}
#post_ad_content.seo-copy{
  background:#fff;
  padding:1.25rem;
}
.seo-copy h2 {
  font-size: 1.15rem;
  padding: 5px 0;
}
.seo-copy h3 {
  font-size: 1rem;
  padding: 5px 0;
}
.seo-copy p {
  padding: 5px 0;
  text-align: justify;
}
/* Keep clear of the fixed sidebar on desktop (sidebar ~60px wide) */
@media (min-width: 1025px){
  #post_ad_content.seo-copy{
    /*margin-left: calc(60px + 1.5rem); /* matches .content’s left margin */
    /*margin-right: 1.5rem;*/
  }
}
/* Mobile/tablet: center with breathing room */
@media (max-width: 1024px){
  #post_ad_content.seo-copy{
    /*margin: 1rem auto;*/
    padding: 1rem;
  }
  .post-ad-layout {
    padding-left: 0 !important;
  }
  .post-ad-layout > .col-left,
  .post-ad-layout > .col-right{
    min-width: 0;
  }
}
/* Buttons in the rail can sit closer to the edge on smaller screens */
#active_ads .panel {
  background: transparent;
  box-shadow: none;
}

/* === Responsive: stack on tablets/phones === */
@media (max-width: 1024px) {
  .post-ad-layout {
    grid-template-columns: 1fr;
    margin-left: 0;     /* sidebar is hidden in this breakpoint */
  }
  .post-ad-layout .col-right {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}
    .post-title { padding:0px 5px; }
    .stepper{max-width:1100px;margin:1rem auto;padding:0 1rem}
    .stepper .steps{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;justify-content:center}
    .step-pill{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:.5rem .9rem;font-size:.9rem}
    .step-pill.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(58,141,255,.15)}
    .step-pill .num{background:var(--dark);color:#fff;width:24px;height:24px;display:grid;place-items:center;border-radius:999px;font-weight:700}
    .step-pill.active .num{background:var(--green)}

    /* Cardish panels */
    .panel{max-width:1100px;margin:1rem auto;background:#fff;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.06);padding:1.25rem}
    .panel h2{font-size:1.2rem;margin-bottom:.75rem}
    .row{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}
    .col-12{grid-column:span 12}
    .col-6{grid-column:span 6}
    .col-4{grid-column:span 4}
    .col-3{grid-column:span 3}
    @media (max-width:768px){.col-6,.col-4,.col-3{grid-column:span 12}}

    label{font-weight:600;font-size:.9rem;margin-bottom:.35rem;display:block}
    select, input[type=text], input[type=tel], input[type=email], textarea{width:100%;padding:.6rem .7rem;border:1px solid #d1d5db;border-radius:8px;font-size:.95rem;background:#fff}
    textarea{min-height:120px;resize:vertical}

    .spec-group{display:grid;gap:10px;grid-template-columns:repeat(12,1fr)}
    .spec-item{grid-column:span 4;background:#f9fafb;border:1px solid #eef2f7;padding:.75rem;border-radius:10px}
    .spec-item[data-type="range"]{grid-column:span 6}
    .spec-item.fade-in{animation:fadeInUp .5s ease both}
    .spec-item.fade-out{animation:fadeOut .35s ease both}
    @keyframes fadeOut{to{opacity:0;transform:translateY(10px)}}

    .btnbar{display:flex;gap:12px;justify-content:flex-end;margin-top:12px}
    .btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:.65rem 1rem;font-weight:600;cursor:pointer}
    .btn.secondary{background:#e5e7eb;color:#111}
    .btn:disabled{opacity:.6;cursor:not-allowed}

    /* Uploads */
    .uploader{border:2px dashed #d1d5db;border-radius:12px;padding:1rem;background:#fafafa;text-align:center}
    .uploader input{display:none}
    .uploader .hint{font-size:.9rem;color:#555}
    .thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:10px}
    .thumb{position:relative;background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden}
    .thumb img{width:100%;height:110px;object-fit:cover;display:block}
    .thumb .del{position:absolute;top:6px;right:6px;background:#0009;color:#fff;border:none;border-radius:6px;padding:2px 6px;font-size:.8rem;cursor:pointer}
    .note{font-size:.85rem;color:#666}
    .shake { animation: shake .35s linear both }
    @keyframes shake {
      10%, 90% { transform: translateX(-1px) }
      20%, 80% { transform: translateX(2px) }
      30%, 50%, 70% { transform: translateX(-4px) }
      40%, 60% { transform: translateX(4px) }
    }
    .city-typeahead{ position:relative; max-width:420px }
    .city-typeahead .suggestions{
      position:absolute; z-index:20; left:0; right:0; top:100%;
      margin:4px 0 0; padding:0; list-style:none; background:#fff; border:1px solid #ddd;
      max-height:260px; overflow:auto; border-radius:6px;
    }
    .city-typeahead .suggestions li{ padding:8px 10px; cursor:pointer }
    .city-typeahead .suggestions li:hover,
    .city-typeahead .suggestions li.active{ background:#f5f7fb }
    /* ====== Post Ad — Specs grid (Transmission → last) ====== */
    /* Mobile-first: single column */
    #specGroup{
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      margin-top:10px;
    }

    /* Spec card */
    #specGroup .spec-item{
      background:#fff;
      border:1px solid #e6e8ee;
      border-radius:10px;
      padding:12px 14px;
    }
    #specGroup .spec-item label{
      display:block;
      font-size:13.5px;
      font-weight:600;
      color:#2b2f3a;
      margin-bottom:6px;
    }
    #specGroup .spec-item input[type="text"],
    #specGroup .spec-item input[type="number"],
    #specGroup .spec-item input[type="tel"],
    #specGroup .spec-item input[type="email"],
    #specGroup .spec-item select{
      width:100%;
      min-height:42px;
      padding:8px 10px;
      border:1px solid #d9dce4;
      border-radius:8px;
      font-size:14px;
      outline:none;
      background:#fff;
      transition:border-color .15s, box-shadow .15s;
    }
    #specGroup .spec-item select[multiple]{ min-height:92px; }

    /* Focus */
    #specGroup .spec-item input:focus,
    #specGroup .spec-item select:focus{
      border-color:#5b8cff;
      box-shadow:0 0 0 3px rgba(91,140,255,.15);
    }

    /* Checkbox (bool) */
    #specGroup .spec-item[data-type="bool"] label{
      display:flex; align-items:center; gap:10px;
    }
    #specGroup .spec-item[data-type="bool"] input[type="checkbox"]{
      width:20px; height:20px;
    }

    /* Number inputs — friendlier on mobile & desktop */
    #specGroup .spec-item input[type="number"]{
      text-align:left;          /* better readability */
      -moz-appearance:textfield; /* Firefox remove arrows */
    }
    #specGroup .spec-item input[type="number"]::-webkit-outer-spin-button,
    #specGroup .spec-item input[type="number"]::-webkit-inner-spin-button{
      -webkit-appearance:none; margin:0; /* Chrome/Safari remove arrows */
    }

    /* City type-ahead (unchanged, just ensuring good spacing) */
    .city-typeahead{ position:relative; }
    .city-typeahead .suggestions{
      position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px);
      background:#fff; border:1px solid #e6e8ee; border-radius:10px;
      box-shadow:0 10px 18px rgba(0,0,0,.06);
      max-height:300px; overflow:auto; padding:6px 0; list-style:none; margin:0;
    }
    .city-typeahead .suggestions li{
      padding:10px 12px; cursor:pointer; font-size:14px;
    }
    .city-typeahead .suggestions li:hover,
    .city-typeahead .suggestions li.active{ background:#f5f7fb; }

    /* Tablet: two columns */
    @media (min-width: 768px){
      #specGroup{
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap:16px;
      }
    }

    /* Desktop: three columns */
    @media (min-width: 1200px){
      #specGroup{
        grid-template-columns: repeat(3, minmax(260px, 1fr));
        gap:18px;
      }
    }
    /* Reset legacy 12-col spans inside the new #specGroup grid */
    #specGroup .spec-item{
      grid-column: auto !important;
    }
    #specGroup .spec-item[data-type="range"]{
      grid-column: auto !important;
    }
    .dropzone{
      border:2px dashed #bbb; border-radius:12px; padding:18px; text-align:center;
      cursor:pointer; transition:.15s ease-in-out; background:#fafafa;
    }
    .dropzone:focus{ outline:2px solid #6aa9ff; outline-offset:2px; }
    .dropzone.dragover{ border-color:#6aa9ff; background:#f0f7ff; }

    .thumbs-grid{
      display:grid; gap:12px; margin-top:12px;
      grid-template-columns: repeat(4, minmax(0,1fr));
    }
    @media (max-width: 991px){
      .thumbs-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
    }
    @media (max-width: 600px){
      .thumbs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    .thumb{ position:relative; border:1px solid #e5e5e5; border-radius:10px; overflow:hidden; }
    .thumb img{ width:100%; height:120px; object-fit:cover; display:block; }
    .thumb .del{
      position:absolute; top:6px; right:6px; border:0; background:#000a; color:#fff;
      width:26px; height:26px; border-radius:50%; cursor:pointer; line-height:26px; text-align:center;
    }
    .form-row.has-error{ border:1px solid #c60000; border-radius:8px; padding:8px; background:#fff7f7; }
    .form-row.has-error .lbl, 
    .form-row.has-error label{ color:#c60000; }

    .lbl.lbl-error{ color:#c60000; }
    input.has-error,
    select.has-error,
    textarea.has-error{
      border-color:#c60000 !important;
      box-shadow:0 0 0 3px rgba(198,0,0,.08);
      background:#fff7f7;
    }
    /* Error styles for uploader / dropzone */
    .uploader.has-error,
    #dropzone.has-error{
      border-color:#c60000 !important;
      background:#fff7f7;
      box-shadow:0 0 0 3px rgba(198,0,0,.08);
    }
    .uploader.has-error .hint{ color:#c60000; }
    .txn-group {
      display: flex; flex-wrap: wrap; gap: 8px;
    }

    .txn-group input[type="radio"] {
      position: absolute; opacity: 0; pointer-events: none;
    }
    .txn-pill {
      display: inline-block;
      padding: 10px 14px;
      border: 1px solid #ddd;
      border-radius: 9999px;
      background: #fff;
      cursor: pointer;
      font-weight: 600;
      line-height: 1;
      transition: all .2s ease;
      user-select: none;
    }
    .txn-group input[type="radio"]:focus + .txn-pill {
      outline: 2px solid #4c9ffe; outline-offset: 2px;
    }
    .txn-group input[type="radio"]:checked + .txn-pill {
      border-color: #4c9ffe;
      background: #e9f3ff;
      box-shadow: 0 0 0 4px rgba(76,159,254,0.15);
    }
    .txn-pill:hover {
      border-color: #bbb; transform: translateY(-1px);
    }
    .vf-modal[hidden] { display: none !important; }
    .vf-modal{ position:fixed; inset:0; background:#0008; display:grid; place-items:center; z-index:10000; }
    .vf-card{ background:#fff; width:min(520px,90vw); padding:18px; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.18); }
    .vf-card h3{ margin:0 0 8px; }
    .vf-row{ margin:12px 0; }
    #vf-code{ width:180px; font-size:22px; letter-spacing:3px; text-align:center; padding:10px; }
    .vf-actions{ display:flex; gap:10px; justify-content:flex-end; }
    .vf-err{ margin-top:8px; color:#b00020; font-weight:600; }
    /* Layout currency + amount in one row */
    #fx-pricecell .price-row {
      display: flex;
      align-items: center;
      gap: 10px; /* space between dropdown and input */
    }

    /* Currency dropdown small */
    #fx-pricecell select#currency {
      flex: 0 0 120px;   /* fixed width, not growing */
      max-width: 140px;
    }

    /* Amount box takes remaining width */
    #fx-pricecell input#price {
      flex: 1 1 auto;    /* flexible, fills available space */
      min-width: 0;      /* avoid overflow in flex */
    }

    /* Responsive stack on small screens */
    @media (max-width: 600px) {
      #fx-pricecell .price-row {
        flex-direction: column;
        align-items: stretch;
      }
      #fx-pricecell select#currency,
      #fx-pricecell input#price {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }
/* Post Classified Ad - End */
/* for scroling card at the bottom - Start */
/* === Active Ads horizontal rail === */
.ad-rail-wrap{ position:relative; }
.ad-rail{
  display:flex; gap:12px; overflow:auto; padding:6px 44px; /* room for arrows */
  scroll-behavior:smooth; scroll-snap-type:x mandatory;
}
.ad-rail::-webkit-scrollbar{ display:none; }
.ad-rail-card{ min-width: 280px; max-width: 320px; scroll-snap-align:center; }

.rail-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; width:36px; height:36px; border-radius:999px;
  background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.14);
  cursor:pointer; z-index:5; font-size:22px; line-height:36px;
}
.rail-left{ left:4px; } .rail-right{ right:4px; }
.rail-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* === Step 3: Upgrade highlight (applied after verification) === */
.upgrade-highlight{
  outline: 3px solid rgba(60,196,124,.35);
  box-shadow: 0 0 0 6px rgba(60,196,124,.12);
  border-radius: 12px;
}
.upgrade-green{
  background: var(--green) !important; color:#fff !important;
}
.package-btn.highlight,
button.highlight {
  /*box-shadow: 0 0 0 3px #007bff inset;
  border-color: #007bff;*/
  background-color: var(--primary);
}
/* for scroling card at the bottom - End */
/* ==== Mobile/tablet overflow fix for post-ad layout ==== */
@media (max-width: 1024px) {
  /* Prevent horizontal scroll globally */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Make layout containers respect viewport width without using 100vw */
  .post-ad-layout,
  header,
  footer {
    width: 100% !important;           /* not 100vw */
    max-width: 100% !important;
    transform: none !important;
    zoom: 1 !important;
  }

  /* Common overflow culprits */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  /* Sidebar is off-canvas <=1024px, so don't keep space for it */
  .content {
    margin-left: 0 !important;
  }
}

/* If some inner wrapper had a too-wide fixed width, rein it in */
.post-ad-layout > * {
  max-width: 100%;
}

/* Optional: make sure fixed sidebar doesn't create scroll when hidden */
@media (max-width: 1024px) {
  .sidebar {
    will-change: transform;
    /* already translated left in your CSS; this just ensures it's not affecting layout */
    overflow: hidden;
  }
}

/* === Packages Section === */
#packages {
  text-align: center;
  padding: 2rem 1rem;
}

#packages .section-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--primary);
  font-weight: 700;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  justify-items: center;
}

.package-card {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.5rem;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.package-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--primary);
}

.package-card ul {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0 0 1rem 0;
}

.package-card ul li {
  font-size: 0.95rem;
  color: #333;
  padding: 6px 0;
  border-bottom: 1px dashed #eee;
}

.package-card .price {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 1rem;
  color: #000;
}

.package-card .price span {
  font-size: 0.85rem;
  color: #666;
}

.select-btn {
  display: inline-block;
  margin-top: 1rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  float: right;
}

.select-btn:hover {
  background: #e22a00;
}

/* Package type colors */
.package-card.basic {
  border-color: #d1d5db;
}
.package-card.premium {
  border-color: var(--blue-dark);
  background: linear-gradient(180deg, #f9fbff 0%, #fff 100%);
}
.package-card.elite {
  border-color: var(--green);
  background: linear-gradient(180deg, #f9fff9 0%, #fff 100%);
}
.package-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
  background-color: #f9fcff;
}
.package-card.highlight {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
/* Make the Free Package full-width outside the grid */
.package-card.free-package {
  grid-column: 1 / -1 !important; /* span across all grid columns */
  width: 100% !important;
  max-width: 100% !important;
  background: #f1f1f1;
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 14px 18px;
  display: block;
  /*display: flex;
  align-items: center;
  justify-content: space-between;*/
  color: #333;
  box-shadow: none;
  cursor: default;
}
.package-card.free-package:hover {
  transform: none;
  box-shadow: none;
}
.package-card.free-package i {
  color: var(--primary);
  margin-right: 8px;
}
.package-card.free-package .select-btn {
  margin: 0;
  background: #666;
  color: #fff;
  font-size: 0.9rem;
  padding: 8px 14px;
  border-radius: 6px;
  float: right;
}
.package-card.free-package p {
  margin: 0;
  flex: 1;
  text-align: left;
}