/* ==========================================================================
   pers-postform.css  -  Publish / Edit listing form (item-post.php)

   Scoped to body.item-post. Restyles the existing form markup - no template
   logic changes - into the same rounded-card design language as the rest of
   the site, and deliberately matches the companion plugins' sell-form card
   (.pers-re-form etc.: #eef0f4 hairline, 14px radius, #e4e7ec inputs with a
   --pers-primary focus ring) so the standard fields and the plugin category
   fields read as one continuous form.

   The plugin fields render their OWN card inside .custombox, so that wrapper
   is left transparent (no double card, and no empty card on a category with
   no plugin fields). The photo uploader and all ItemForm field markup are
   untouched - only their appearance changes.
   ========================================================================== */

body.item-post .itempost { background: #f5f6f8; padding-bottom: 44px; }
body.item-post .itempost > div { width: auto; max-width: 820px; margin: 0 auto; }

body.item-post .page-title { padding: 26px 0 8px; }
body.item-post .page-title h1 {
    font-size: 26px;
    font-weight: 700;
    color: #1d2939;
    margin: 0;
}
body.item-post #content { padding: 0; background: transparent; }

/* --------------------------------------------------------------------------
   Section cards
   -------------------------------------------------------------------------- */
body.item-post .generalbox,
body.item-post .imagebox,
body.item-post .locationbox,
body.item-post .sellerbox {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 22px 24px;
    margin: 0 0 18px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
/* the plugin's own .pers-*-form is already a card -> keep this wrapper flat */
body.item-post .custombox {
    margin: 0 0 18px;
    padding: 0;
    background: transparent;
    border: 0;
}
body.item-post .custombox .pers-re-form,
body.item-post .custombox .pers-veh-form,
body.item-post .custombox .pers-job-form { margin: 0; }

/* section headings */
body.item-post .itempost #content h2 {
    font-size: 17px;
    font-weight: 700;
    color: #1d2939;
    margin: 0 0 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid #eef0f4;
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   Standard form rows - stacked labels + modern inputs.
   Scoped to the theme-owned boxes ONLY, never .custombox, so the plugin
   category fields keep their own layout and styling.
   -------------------------------------------------------------------------- */
body.item-post .generalbox .form-group,
body.item-post .locationbox .form-group,
body.item-post .sellerbox .form-group { margin: 0 0 18px; display: block; }
body.item-post .generalbox .form-group:last-child,
body.item-post .locationbox .form-group:last-child,
body.item-post .sellerbox .form-group:last-child { margin-bottom: 0; }

body.item-post .generalbox .control-label,
body.item-post .locationbox .control-label,
body.item-post .sellerbox .control-label {
    display: block;
    float: none;
    width: auto;
    text-align: left;
    padding: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #667085;
}
body.item-post .generalbox .form-group > div[class*="col-"],
body.item-post .locationbox .form-group > div[class*="col-"],
body.item-post .sellerbox .form-group > div[class*="col-"] {
    width: 100%;
    float: none;
    padding: 0;
}
body.item-post .col-sm-offset-3 { margin-left: 0; }

body.item-post .generalbox input[type="text"],
body.item-post .generalbox select,
body.item-post .generalbox textarea,
body.item-post .locationbox input[type="text"],
body.item-post .locationbox select,
body.item-post .sellerbox input[type="text"],
body.item-post .sellerbox input[type="email"] {
    width: 100%;
    max-width: 460px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    color: #1d2939;
    font-size: 14px;
    box-shadow: none;
    box-sizing: border-box;
}
body.item-post .generalbox textarea { max-width: 100%; min-height: 130px; height: auto; }
body.item-post .generalbox input:focus,
body.item-post .generalbox select:focus,
body.item-post .generalbox textarea:focus,
body.item-post .locationbox input:focus,
body.item-post .locationbox select:focus,
body.item-post .sellerbox input:focus {
    border-color: var(--pers-primary, #3492e1);
    box-shadow: 0 0 0 3px var(--pers-primary-soft, rgba(52,146,225,.15));
    outline: 0;
}
/* custom chevron on the standard selects, matching the plugin selects */
body.item-post .generalbox select,
body.item-post .locationbox select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20fill%3D%22%2398a2b3%22%20d%3D%22M0%200l5%206%205-6z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}

/* price + currency on one row */
body.item-post .price-group div#price {
    display: flex;
    gap: 10px;
    max-width: 460px;
    width: 100%;
}
body.item-post .price-group div#price > input#price {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    float: none;
    margin: 0;
}
body.item-post .price-group div#price > select#currency {
    flex: 0 0 132px;
    width: 132px;
    max-width: none;
    float: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Photos - modern dropzone
   -------------------------------------------------------------------------- */
body.item-post .imagebox .qq-upload-button {
    color: #667085;
    background: #f9fafb;
    border: 2px dashed #d0d5dd;
    border-radius: 12px;
    font-weight: 600;
    padding: 22px 0 24px;
    width: 100%;
    transition: border-color .15s ease, background .15s ease;
}
body.item-post .imagebox .qq-upload-button:hover {
    border: 2px dashed var(--pers-primary, #3492e1);
    background: var(--pers-primary-soft, #eef6fd);
}
body.item-post .imagebox .qq-upload-button > div:before { color: var(--pers-primary, #3492e1); }

/* --------------------------------------------------------------------------
   Checkbox row + submit button
   -------------------------------------------------------------------------- */
body.item-post .sellerbox .checkbox label { font-weight: 500; color: #344054; }
/* For logged-in users the template renders the submit (and reCAPTCHA) as bare
   form-groups directly under the form, with no .sellerbox card around them -
   give those a little breathing room from the section above. */
body.item-post form#item-post > .form-group { margin: 4px 0 0; }
body.item-post .btn-clr {
    border-radius: 10px;
    padding: 11px 26px;
    font-weight: 600;
    font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.item-post .generalbox,
    body.item-post .imagebox,
    body.item-post .locationbox,
    body.item-post .sellerbox { padding: 18px 16px; }
    body.item-post .generalbox input[type="text"],
    body.item-post .generalbox select,
    body.item-post .locationbox input[type="text"],
    body.item-post .locationbox select,
    body.item-post .sellerbox input[type="text"],
    body.item-post .sellerbox input[type="email"] { max-width: 100%; }
}