/* WorldAds - post-an-ad flow.

   Every rule is scoped to `.wads-flow .hp-form` (the form card) or `.wads-flow .hp-page`
   (the page body), never to `.wads-flow` alone. The site header lives inside the same
   body element, so a bare `.wads-flow button[type=submit]` also matches the header search
   button and stretches it to full width. Keep the scope tight. */

.hp-page__title,.wads-steps{scroll-margin-top:150px;}

.wads-flow{background:var(--wad-bg);}
.wads-flow .hp-page{max-width:820px;margin:0 auto;padding:34px 20px 72px;}
.wads-flow .hp-page .hp-page__title{
  font-size:31px;font-weight:800;letter-spacing:-.025em;color:var(--wad-ink);margin:0 0 6px;
}
.wads-flow .hp-page .wads-intro{
  font-size:16px;line-height:1.6;color:var(--wad-muted);margin:0 0 26px;max-width:60ch;
}

/* ---- Progress steps ---- */
.wads-flow .wads-steps{list-style:none;display:flex;align-items:center;margin:0 0 24px;padding:0;}
.wads-flow .wads-steps__item{display:flex;align-items:center;gap:9px;flex:1 1 0;min-width:0;}
.wads-flow .wads-steps__item:last-child{flex:0 0 auto;}
.wads-flow .wads-steps__item:not(:last-child)::after{
  content:'';flex:1 1 auto;height:2px;background:var(--wad-line);margin:0 12px;border-radius:2px;
}
.wads-flow .wads-steps__dot{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;background:#fff;color:#9AA9BC;
  border:2px solid var(--wad-line);transition:all .2s;
}
.wads-flow .wads-steps__label{font-size:14.5px;font-weight:600;color:#9AA9BC;white-space:nowrap;}
.wads-flow .wads-steps__item--current .wads-steps__dot{
  background:var(--wad-accent);border-color:var(--wad-accent);color:#fff;
  box-shadow:0 0 0 4px rgba(0,179,104,.16);
}
.wads-flow .wads-steps__item--current .wads-steps__label{color:var(--wad-ink);}
.wads-flow .wads-steps__item--done .wads-steps__dot{
  background:var(--wad-ink);border-color:var(--wad-ink);color:#fff;
}
.wads-flow .wads-steps__item--done .wads-steps__label{color:var(--wad-ink);}
.wads-flow .wads-steps__item--done:not(:last-child)::after{background:var(--wad-ink);}

/* ---- Form card ---- */
.wads-flow .hp-page .hp-form{
  background:#fff;border:1px solid var(--wad-line);border-radius:16px;
  padding:30px 30px 26px;box-shadow:var(--wad-shadow);
}

/* ---- Fields (inside the card only) ---- */
.wads-flow .hp-form .hp-form__field{margin-bottom:22px;}
.wads-flow .hp-form .hp-field__label{
  display:block;font-size:12.5px;font-weight:700;color:var(--wad-ink);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;
}
.wads-flow .hp-form .hp-field__label small{
  font-weight:600;color:#9AA9BC;text-transform:none;letter-spacing:0;font-size:12.5px;
}
.wads-flow .hp-form input[type=text],
.wads-flow .hp-form input[type=search],
.wads-flow .hp-form input[type=email],
.wads-flow .hp-form input[type=url],
.wads-flow .hp-form input[type=number],
.wads-flow .hp-form input[type=tel],
.wads-flow .hp-form input[type=date],
.wads-flow .hp-form select,
.wads-flow .hp-form textarea{
  width:100%;height:auto;min-height:50px;
  border:1.5px solid var(--wad-line);border-radius:10px;
  padding:12px 14px;font-size:15.5px;color:var(--wad-ink);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.wads-flow .hp-form textarea{min-height:150px;line-height:1.6;resize:vertical;}
.wads-flow .hp-form input:focus,
.wads-flow .hp-form select:focus,
.wads-flow .hp-form textarea:focus{
  border-color:var(--wad-accent);
  box-shadow:0 0 0 4px rgba(0,179,104,.13);outline:none;
}
.wads-flow .hp-form .select2-container .select2-selection--single{
  height:auto;min-height:50px;
  border:1.5px solid var(--wad-line);border-radius:10px;padding:12px 14px;
}
.wads-flow .hp-form .select2-container--open .select2-selection--single{
  border-color:var(--wad-accent);box-shadow:0 0 0 4px rgba(0,179,104,.13);
}
.wads-flow .hp-form .select2-container .select2-selection--single .select2-selection__rendered{
  line-height:24px;padding-left:0;padding-right:20px;color:var(--wad-ink);
}
.wads-flow .hp-form .select2-container .select2-selection--single .select2-selection__arrow{
  height:48px;right:8px;
}

/* ---- Image dropzone ---- */
.wads-flow .hp-form .hp-field--attachment-upload button,
.wads-flow .hp-form .hp-field--attachment-upload label{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:118px;cursor:pointer;
  border:2px dashed #C3D0DF;border-radius:14px;
  background:#F4F8FC;color:var(--wad-ink);
  font-weight:700;font-size:15.5px;line-height:1.3;
  box-shadow:none;
  transition:border-color .15s,background .15s;
}
.wads-flow .hp-form .hp-field--attachment-upload button:hover,
.wads-flow .hp-form .hp-field--attachment-upload label:hover{
  border-color:var(--wad-accent);background:#EDF9F3;
}

/* ---- Submit button (card footer only) ---- */
.wads-flow .hp-form .hp-form__footer{margin-top:6px;}
.wads-flow .hp-form .hp-form__footer button[type=submit],
.wads-flow .hp-form .hp-form__footer .hp-form__button{
  width:100%;min-height:54px;border-radius:10px;
  background:var(--wad-accent);border:none;color:#fff;
  font-size:16.5px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,179,104,.28);
  transition:background .15s,transform .1s;
}
.wads-flow .hp-form .hp-form__footer button[type=submit]:hover,
.wads-flow .hp-form .hp-form__footer .hp-form__button:hover{background:var(--wad-accent-hover);}
.wads-flow .hp-form .hp-form__footer button[type=submit]:active{transform:translateY(1px);}

/* ---- Category chooser (step 1) ---- */
.wads-flow .hp-page .hp-listing-category{
  background:#fff;border:1px solid var(--wad-line);border-radius:14px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.wads-flow .hp-page .hp-listing-category:hover{
  border-color:var(--wad-accent);box-shadow:var(--wad-shadow);transform:translateY(-3px);
}

@media(max-width:700px){
  .wads-flow .wads-steps__label{display:none;}
  .wads-flow .wads-steps__item{flex:0 0 auto;}
  .wads-flow .wads-steps__item:not(:last-child)::after{width:34px;flex:0 0 34px;margin:0 8px;}
  .wads-flow .hp-page .hp-form{padding:22px 18px;}
  .wads-flow .hp-page{padding:24px 14px 56px;}
  .wads-flow .hp-page .hp-page__title{font-size:26px;}
}