/**
 * Listing submit form — library/front_end/listing_submit_form.php.
 * Added 2026-08-18 from the approved mockup.
 * Enqueued only on the submit-listing page template
 * (admin/geocraft_functions.php, on wp_enqueue_scripts).
 * Uses the --dt-* tokens from css/desert-tokens.css.
 *
 * Scoped under #add_place so it cannot reach the other templates that
 * reuse .form_row / .field / .label.
 */


.sub-wrapper{
    max-width:1220px;
    margin:0 auto;
    padding:0 clamp(16px,3vw,30px) 70px;
    box-sizing:border-box;
}
.sub-wrapper #place_header{
    padding:34px 0 22px;
    margin-bottom:28px;
    border-bottom:1px solid var(--dt-paper-line);
    background:none;
    border-radius:0;
}
.sub-wrapper .sub-eyebrow-top{
    margin:0 0 8px;
    font-family:'Archivo',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--dt-terracotta);
}
.sub-wrapper #place_header h1.title{
    margin:0 0 18px;
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:clamp(28px,3.6vw,40px);
    line-height:1.08;
    color:var(--dt-ink-950);
    background:none;
    border:none;
    padding:0;
}
/* ---------- step pills ----------
   These are numbered deliberately: listing_step() emits a real
   three-stage sequence (details, review, done) and the visitor needs to
   know which one they're on and how many are left. The state classes
   are the theme's own - `current` for the active step, `previous` /
   `lastprev` for ones already passed. */
.sub-wrapper #place_header ul.step{
    display:flex;
    flex-wrap:wrap;
    gap:8px 10px;
    list-style:none;
    margin:0;
    padding:0;
    background:none;
    height:auto;
    counter-reset:sub-step;
}
.sub-wrapper #place_header ul.step li{
    display:inline-flex;
    align-items:center;
    gap:8px;
    list-style:none;
    float:none;
    margin:0;
    padding:8px 16px 8px 9px;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:24px;
    font-family:'Archivo',sans-serif;
    font-size:12.5px;
    font-weight:600;
    color:var(--dt-ink-800);
    width:auto;
    height:auto;
    text-indent:0;
    counter-increment:sub-step;
}
.sub-wrapper #place_header ul.step li:before{
    content:counter(sub-step);
    flex:none;
    width:21px;
    height:21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--dt-paper-line);
    color:var(--dt-ink-800);
    font-size:11px;
    font-weight:700;
}
.sub-wrapper #place_header ul.step li a{color:inherit;text-decoration:none;}
/* already passed */
.sub-wrapper #place_header ul.step li.previous,
.sub-wrapper #place_header ul.step li.lastprev{
    border-color:var(--dt-terracotta);
    color:var(--dt-ink-950);
}
.sub-wrapper #place_header ul.step li.previous:before,
.sub-wrapper #place_header ul.step li.lastprev:before{
    background:var(--dt-terracotta);
    color:var(--dt-paper-hi);
}
/* the step you are on */
.sub-wrapper #place_header ul.step li.current{
    background:var(--dt-ink-950);
    border-color:var(--dt-ink-950);
    color:var(--dt-paper-hi);
}
.sub-wrapper #place_header ul.step li.current:before{
    background:var(--dt-terracotta);
    color:var(--dt-paper-hi);
}

#add_place{
    margin:0;
    padding-bottom:20px;
}

/* Step 2 (review before submit) renders through
   geocraft_preview_place_form(). It used to inherit the 820px cap meant
   for step 1's form (a deliberate typographic measure for label+input
   rows) - wrong for this step, which needs to lay out an image, an info
   panel, a description and a map. It now gets the full width of
   .sub-wrapper like everything else on this page. */
.sub-wrapper .sub-preview{
    max-width:none;
    margin:0 0 30px;
}

/* =====================================================================
   Step 2 layout — geocraft_preview_place_form() rebuild, 2026-08-26
   =====================================================================
   listing_preview.php now emits dt-prev-* wrappers (image row, then a
   description+info row, then the map, then actions) instead of the old
   24-col grid_14/grid_10/grid_16 float classes, which this owns outright
   rather than out-specifying. Everything *inside* those wrappers -
   article_slider, table.ar_desc, the #gc_tab jQuery UI tabs, the map -
   is still stock markup and JS (flexslider, jQuery UI .tabs(), Google
   Maps) and keeps its stock classes; only the outer grouping changed, so
   none of that JS needed to move.
   ===================================================================== */
.dt-prev{display:flex;flex-direction:column;gap:30px;}

/* ---------- main image ---------- */
/* Same treatment (and the same clamp()) as the published listing's own
   gallery in desert-listing.css, so the preview looks like what the
   listing will actually become. flexslider hides every slide with
   `display:none` until its JS reveals the active one (style.css); that
   JS does run sitewide, but forcing block here means a single preview
   image never depends on it having fired first. */
.dt-prev-media .article_slider{margin:0;}
.dt-prev-media .flexslider{
    width:100%;
    margin:0;
    padding:0;
    border:none;
    background:var(--dt-ink-800);
    border-radius:var(--dt-radius);
    overflow:hidden;
    box-shadow:none;
}
.dt-prev-media .flexslider .slides > li{display:block;}
.dt-prev-media .flexslider .slides img{
    width:100%;
    height:clamp(260px,42vw,460px);
    max-width:none;
    object-fit:cover;
    display:block;
}

/* ---------- description + listing info ---------- */
.dt-prev-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) 348px;
    gap:clamp(20px,3vw,32px);
    align-items:start;
}
.dt-prev-desc,
.dt-prev-info{min-width:0;}

/* Description: stock #gc_tab / jQuery UI tabs markup (a single tab, so
   the nav is really just a header), restyled from the grey/beige
   gradient tab skin in style.css to the desert card treatment. */
.dt-prev-desc #gc_tab.tabbed{margin:0;padding:0;}
.dt-prev-desc #gc_tab .tabnav{
    margin:0;
    border:0;
}
.dt-prev-desc #gc_tab .tabnav li{padding-right:0;}
.dt-prev-desc #gc_tab .tabnav li a{
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:11.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--dt-ink-800);
    opacity:.72;
    background:none;
    border:none;
    padding:0 0 10px;
    text-shadow:none;
}
.dt-prev-desc #gc_tab .tabdiv{
    margin-top:8px;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
    padding:22px 24px;
}
.dt-prev-desc #gc_tab .tab_content{
    padding:0;
    font-family:'Archivo',sans-serif;
    font-size:15px;
    line-height:1.65;
    color:var(--dt-ink-950);
    word-break:break-word;
    overflow-wrap:anywhere;
}
.dt-prev-desc #gc_tab .tab_content img{max-width:100%;height:auto;border-radius:var(--dt-radius);}

/* Info rail: same table.ar_desc markup the published listing uses, but
   that page has ~830px for it (desert-listing.css keeps label+value on
   one row); this rail is 348px, so label-beside-value has no room and
   was the "beaucoup trop étroit" column - label above value instead,
   like a spec sheet. Icon backgrounds from style.css's .label.address
   etc. assumed the wider inline layout too, so they're dropped here
   rather than clipped. */
.dt-prev-info .article_detail{margin-left:0;}
.dt-prev-info .tbl_des{
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
    margin-top:0;
    padding:20px 22px;
    overflow-x:hidden;
}
.dt-prev-info table.ar_desc,
.dt-prev-info table.ar_desc tbody,
.dt-prev-info table.ar_desc tr,
.dt-prev-info table.ar_desc td{
    display:block;
    width:auto;
}
.dt-prev-info table.ar_desc{font-size:inherit;}
.dt-prev-info table.ar_desc tr{
    padding:11px 0;
    border-bottom:1px solid var(--dt-paper-line);
}
.dt-prev-info table.ar_desc tr:first-child{padding-top:0;}
.dt-prev-info table.ar_desc tr:last-child{padding-bottom:0;border-bottom:0;}
.dt-prev-info table.ar_desc td.label{
    min-width:0;
    padding:0 0 3px;
    /* the stock icon-background rules (.depth_article .article_detail
       .ar_desc .label.address etc., style.css) all require .depth_article
       as an ancestor, which no longer exists in this markup, so they can
       never match here - no !important needed to beat them. */
    background:none;
    font-family:'Archivo',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--dt-ink-800);
    opacity:.7;
}
.dt-prev-info table.ar_desc td:not(.label){
    padding:0;
    font-family:'Archivo',sans-serif;
    font-size:14.5px;
    color:var(--dt-ink-950);
    word-break:break-word;
    overflow-wrap:anywhere;
}

/* ---------- location map ---------- */
.dt-prev-map h2{
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:clamp(19px,2.2vw,23px);
    color:var(--dt-ink-950);
    margin:0 0 14px;
}
.dt-prev-map .map{
    width:100%;
    border:1px solid var(--dt-paper-line) !important;
    border-radius:var(--dt-radius);
    overflow:hidden;
    box-sizing:border-box;
}
.dt-prev-map #map-canvas{width:100%;height:360px;}
/* Fallback when there are no coordinates to plot (see the PHP comment
   above $has_coords) but the agency did type an address - a plain line
   instead of an empty 360px map canvas. */
.dt-prev-map-address{
    margin:0;
    padding:16px 18px;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
    font-family:'Archivo',sans-serif;
    font-size:14.5px;
    color:var(--dt-ink-950);
}

/* ---------- actions ---------- */
.dt-prev-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.dt-prev-actions input.goback,
.dt-prev-actions input.submit{
    box-sizing:border-box;
    height:46px;
    padding:0 26px;
    border-radius:999px;
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:14px;
    line-height:44px;
    text-indent:0;
    cursor:pointer;
}
.dt-prev-actions input.goback{
    background:none;
    border:1.5px solid var(--dt-paper-line);
    color:var(--dt-ink-950);
}
.dt-prev-actions input.goback:hover{background:var(--dt-paper-hi);}
.dt-prev-actions input.submit{
    background:var(--dt-terracotta);
    border:1.5px solid var(--dt-terracotta);
    color:var(--dt-paper-hi);
}
.dt-prev-actions input.submit:hover{background:var(--dt-terracotta-hi);border-color:var(--dt-terracotta-hi);}

@media only screen and (max-width:900px){
    .dt-prev-body{grid-template-columns:1fr;}
}
@media only screen and (max-width:620px){
    .dt-prev{gap:22px;}
    .dt-prev-media .flexslider .slides img{height:clamp(180px,58vw,260px);}
    .dt-prev-map #map-canvas{height:240px;}
    .dt-prev-actions{flex-direction:column-reverse;align-items:stretch;}
    .dt-prev-actions input.goback,
    .dt-prev-actions input.submit{width:100%;}
}

/* =====================================================================
   Step 3 — success message
   =====================================================================
   SBMITION_MSG (library/text_domains/template_path.php) is a raw
   translatable string - two <p> tags, no wrapper styling of its own.
   Its container carries gc-notice/gc-notice-success, but those classes
   are only defined in library/css/gc_geocraft_ux.css, which is
   <link>ed from inside listing_submit_form.php, listing_preview.php and
   dashboard_functions.php - none of which render on step 3, so it never
   loads here and the message showed as bare paragraph text. Styled
   directly instead, since this file already loads unconditionally on
   template_submit.php regardless of step. */
.sub-wrapper .submit_successful{
    max-width:640px;
    margin:8px auto 0;
    padding:46px 40px 40px;
    text-align:center;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
}
.sub-wrapper .submit_successful::before{
    content:"\2713";
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    margin:0 auto 22px;
    border-radius:50%;
    background:var(--dt-zellige);
    color:#fff;
    font-size:24px;
    font-weight:700;
}
.sub-wrapper .submit_successful p{
    margin:0 0 10px;
    font-family:'Archivo',sans-serif;
    font-size:15.5px;
    line-height:1.6;
    color:var(--dt-ink-800);
}
.sub-wrapper .submit_successful p:first-child{
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:26px;
    color:var(--dt-ink-950);
    margin-bottom:8px;
}
.sub-wrapper .submit_successful p:last-child{margin-bottom:0;}

/* =====================================================================
   Cancelled PayPal payment (step 6)
   =====================================================================
   Rendered by gc_render_payment_cancelled(). Deliberately not the
   --mdt-late/error red and not the terracotta accent: cancelling is a
   neutral outcome, not a failure and not the thing we want clicked. The
   gold token carries "attention, nothing broken"; the one action that
   moves the agency forward (the dashboard, where payment can be finished)
   takes the accent. */
.sub-wrapper .gc-pay-cancelled{
    max-width:640px;
    margin:8px auto 0;
    padding:38px 40px 34px;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-left:3px solid var(--dt-gold);
    border-radius:var(--dt-radius);
}
.sub-wrapper .gc-pay-cancelled-eyebrow{
    margin:0 0 8px;
    font-family:'Archivo',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--dt-gold);
}
.sub-wrapper .gc-pay-cancelled h2{
    margin:0 0 14px;
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:26px;
    color:var(--dt-ink-950);
}
.sub-wrapper .gc-pay-cancelled p{
    font-family:'Archivo',sans-serif;
    font-size:15px;
    line-height:1.6;
    color:var(--dt-ink-800);
}
.sub-wrapper .gc-pay-cancelled-lead{margin:0 0 12px;}
.sub-wrapper .gc-pay-cancelled-note{margin:0 0 22px;font-size:13.5px;opacity:.85;}
.sub-wrapper .gc-pay-cancelled-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.sub-wrapper .gc-pay-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    height:46px;
    padding:0 24px;
    border-radius:999px;
    border:1.5px solid var(--dt-paper-line);
    background:none;
    color:var(--dt-ink-950);
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
}
.sub-wrapper .gc-pay-btn:hover{background:var(--dt-paper);}
.sub-wrapper .gc-pay-btn-primary{
    background:var(--dt-terracotta);
    border-color:var(--dt-terracotta);
    color:var(--dt-paper-hi);
}
.sub-wrapper .gc-pay-btn-primary:hover{
    background:var(--dt-terracotta-hi);
    border-color:var(--dt-terracotta-hi);
}
@media only screen and (max-width:620px){
    .sub-wrapper .gc-pay-cancelled{padding:28px 22px 26px;}
    .sub-wrapper .gc-pay-cancelled-actions{flex-direction:column;align-items:stretch;}
}

#add_place h4.row_title{
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:clamp(19px,2.2vw,23px);
    color:var(--dt-ink-950);
    background:none;
    border:none;
    border-bottom:1px solid var(--dt-paper-line);
    padding:0 0 10px;
    margin:38px 0 18px;
}
#add_place h4.row_title:first-of-type{margin-top:0;}

/* ---------- two-column shell ----------
   Was: .sub-rail floated right, with every field capped at 720px to
   keep clear of it. A float can't reserve its own column, so any field
   taller than the rail (the TinyMCE editor, the image uploader) wrapped
   underneath it and the layout came apart below the categories. Grid
   gives the rail a real column that nothing can flow into. */
#placeform{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:0 40px;
    align-items:start;
}
#placeform > *{grid-column:1;min-width:0;}

/* ---------- order summary rail ---------- */
#add_place .sub-rail{
    grid-column:2;
    grid-row:1 / -1;
    align-self:start;
    position:sticky;
    top:18px;
    width:auto;
    margin:0;
    float:none;
}
#add_place .sub-sum{
    background:var(--dt-ink-950);
    color:var(--dt-cream);
    border-radius:var(--dt-radius);
    padding:22px;
    box-shadow:var(--dt-shadow);
}
#add_place .sub-eyebrow{
    display:block;
    font-family:'Archivo',sans-serif;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--dt-terracotta-hi);
}
#add_place .sub-sum h3{
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    color:#fff;
    font-size:19px;
    margin:8px 0 16px;
}
#add_place .sub-line{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    font-family:'Archivo',sans-serif;
    font-size:13.5px;
    border-bottom:1px solid var(--dt-ink-line);
}
#add_place .sub-line span:first-child{color:var(--dt-cream-dim);}
#add_place .sub-total{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-top:14px;
    padding-top:14px;
    border-top:2px solid var(--dt-terracotta);
}
#add_place .sub-total .k{
    font-family:'Archivo',sans-serif;
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--dt-cream-dim);
    font-weight:700;
}
#add_place .sub-total .v{
    font-family:'Fraunces',Georgia,serif;
    font-weight:700;
    font-size:29px;
    color:#fff;
}
#add_place .sub-sum input[type="submit"]{
    display:block;
    width:100%;
    margin:17px 0 0;
    background:var(--dt-terracotta);
    border:none;
    border-radius:var(--dt-radius);
    color:var(--dt-paper-hi);
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:14.5px;
    padding:14px 16px;
    height:auto;
    cursor:pointer;
    text-indent:0;
}
#add_place .sub-sum input[type="submit"]:hover{background:var(--dt-terracotta-hi);}
#add_place .sub-note,
#add_place .sub-desc{
    font-family:'Archivo',sans-serif;
    font-size:11.5px;
    line-height:1.45;
    color:var(--dt-cream-dim);
    margin:12px 0 0;
}

/* ---------- generic rows: label above field ---------- */
#add_place .form_row{
    display:block;
    clear:none;
    overflow:visible;
    margin-bottom:18px;
    max-width:none;
}
#add_place .form_row .label,
#add_place .form_row .field{
    float:none;
    display:block;
    width:auto;
}
#add_place .form_row .label label{
    font-family:'Archivo',sans-serif;
    font-size:12.5px;
    font-weight:700;
    color:var(--dt-ink-800);
    margin-bottom:6px;
    display:block;
}
#add_place .form_row .required{color:var(--dt-terracotta);}
#add_place .form_row .field input[type="text"],
#add_place .form_row .field input[type="email"],
#add_place .form_row .field input[type="url"],
#add_place .form_row .field input[type="password"],
#add_place .form_row .field select,
#add_place .form_row .field textarea{
    width:100%;
    max-width:none;
    box-sizing:border-box;
    height:46px;
    padding:0 13px;
    border:1.5px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
    background:var(--dt-paper-hi);
    font-family:'Archivo',sans-serif;
    font-size:15px;
    color:var(--dt-ink-950);
}
#add_place .form_row .field textarea{height:150px;padding:11px 13px;resize:vertical;line-height:1.5;}
#add_place .form_row .field input:focus,
#add_place .form_row .field select:focus,
#add_place .form_row .field textarea:focus{
    outline:2.5px solid var(--dt-zellige);
    outline-offset:1px;
    border-color:var(--dt-zellige);
}
#add_place .description{
    display:block;
    font-family:'Archivo',sans-serif;
    font-size:12.5px;
    color:var(--dt-ink-800);
    opacity:.75;
    margin-top:6px;
}

/* ---------- categories as pills ---------- */
#add_place .cat-box{
    height:auto;
    width:auto;
    max-width:none;
    overflow:visible;
    margin-bottom:14px;
}
#add_place ul.select_cat{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    list-style:none;
    margin:0;
    padding:0;
    float: right;
}
#add_place ul.select_cat li{
    margin:0;
    padding:0;
    list-style:none;
    background:none;
}
#add_place ul.select_cat li label{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:11px 15px;
    border:1.5px solid var(--dt-paper-line);
    border-radius:24px;
    background:var(--dt-paper-hi);
    cursor:pointer;
    font-family:'Archivo',sans-serif;
    font-size:14px;
    font-weight:600;
    color:var(--dt-ink-950);
    transition:border-color .15s ease,background .15s ease,color .15s ease;
}
#add_place ul.select_cat li label:hover{border-color:var(--dt-terracotta);}
/* The checkbox itself stays in the markup for submission but is not shown. */
#add_place ul.select_cat li label input.list_category{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
}
#add_place ul.select_cat li label:focus-within{
    outline:2.5px solid var(--dt-zellige);
    outline-offset:2px;
}
#add_place ul.select_cat li label:has(input:focus:not(:focus-visible)){
    outline:none;
}
#add_place ul.select_cat li label.is-checked{
    border-color:var(--dt-terracotta);
    background:var(--dt-terracotta);
    color:var(--dt-paper-hi);
}
#add_place .cat-tag{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:3px 8px;
    border-radius:12px;
    background:var(--dt-paper-line);
    color:var(--dt-ink-800);
    white-space:nowrap;
}
#add_place ul.select_cat li label.is-checked .cat-tag{
    background:rgba(248,240,223,.22);
    color:var(--dt-paper-hi);
}

/* ---------- packages as cards ---------- */
#add_place #packages_checkbox{max-width:none;}
#add_place .package{margin:0 0 11px;}
#add_place .package > label{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:17px;
    border:1.5px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
    background:var(--dt-paper-hi);
    cursor:pointer;
    transition:border-color .15s ease,box-shadow .15s ease;
}
#add_place .package > label:hover{border-color:var(--dt-terracotta);}
#add_place .package input.price_select{
    margin:3px 0 0;
    width:19px;
    height:19px;
    accent-color:var(--dt-terracotta);
    flex:none;
}
#add_place .pkg_ct{flex:1;}
#add_place .pkg_ct h3{
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:16.5px;
    margin:0 0 4px;
    color:var(--dt-ink-950);
}
#add_place .pkg_ct p{
    margin:0 0 6px;
    font-family:'Archivo',sans-serif;
    font-size:13px;
    color:var(--dt-ink-800);
}
#add_place .pkg_ct p.cost{
    font-weight:700;
    color:#8C3E1B;
    font-size:14px;
}

/* ---------- featured add-ons ---------- */
#add_place #featured{
    max-width:none;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
    padding:18px;
}
#add_place #featured .field label{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Archivo',sans-serif;
    font-size:14px;
    padding:6px 0;
}
#add_place #featured input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:var(--dt-terracotta);
    flex:none;
}

#add_place #price_select_error,
#add_place .gc-error{color:#9A4B2E;font-family:'Archivo',sans-serif;font-size:13.5px;}

@media only screen and (max-width:940px){
    /* Single column: the rail becomes a normal block, moved to the end
       of the form (order:2) so the fields come first and the summary
       reads as the last thing before submitting - the same reading
       order the two-column layout gives on a wide screen. */
    #placeform{
        display:flex;
        flex-direction:column;
        gap:0;
    }
    #add_place .sub-rail{
        order:2;
        position:static;
        width:auto;
        margin:8px 0 0;
        align-self:auto;
    }
    #placeform > *{order:1;}
}

/* ---------- logged-out gate ----------
   Visitors who are not signed in never reach the form: template_submit.php
   prints the theme's stock Sign In / Create a free account pair inside the
   same #add_place wrapper. That pair had no styling of its own, so the one
   page we ask people to convert on opened on bare 2010-era defaults —
   hairline inputs, grey system buttons, a two-thirds-empty row. Same
   tokens as the form below it, so the two steps look like one flow.
   Several inputs carry inline style="" attributes from the theme
   (height:28px, 1px #dddcdc border); !important is the only way past an
   inline rule, hence its use on those properties only. */
#add_place:has(#loginform){
    max-width:900px;
    /* centred now that the template no longer parks this in a 65%-wide
       .grid_16 with an empty column beside it */
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:26px;
    align-items:start;
    padding-top:34px;
}
#add_place #loginform,
#add_place #registration_form{
    /* The theme gives both blocks width:50% + float:left for the old
       two-up float layout; inside a grid cell that halves them again. */
    width:auto;
    float:none;
    display:block;
    margin:0;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
    padding:26px 28px 30px;
    box-sizing:border-box;
}
#add_place #registration_form .register{border:none;padding:0;margin:0;width:auto;}
#add_place #loginform h4,
#add_place #registration_form h4{
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:22px;
    line-height:1.2;
    color:var(--dt-ink-950);
    background:none;
    border:none;
    padding:0;
    margin:0 0 18px;
}
#add_place #loginform .row,
#add_place #registration_form .row{
    margin:0 0 15px;
    padding:0;
    border:none;
    width:auto;
    float:none;
    overflow:visible;
}
#add_place #loginform label,
#add_place #registration_form label{
    display:block;
    float:none;
    width:auto;
    font-family:'Archivo',sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--dt-ink-800);
    margin:0 0 6px;
    text-align:left;
}
#add_place #loginform .required,
#add_place #registration_form .required{
    color:var(--dt-terracotta);
    margin-left:2px;
}
#add_place #loginform input[type="text"],
#add_place #loginform input[type="password"],
#add_place #registration_form input[type="text"],
#add_place #registration_form input[type="password"]{
    display:block;
    width:100% !important;
    /* The password inputs carry style="height:28px !important" inline,
       and an inline !important outranks an author !important — so height
       cannot be won here. min-height is a different property, untouched
       by that inline rule, and clamps the box to the same 46px. */
    height:46px !important;
    min-height:46px;
    box-sizing:border-box;
    margin:0 !important;
    padding:0 13px !important;
    border:1.5px solid var(--dt-paper-line) !important;
    border-radius:var(--dt-radius) !important;
    background:#fff;
    font-family:'Archivo',sans-serif;
    font-size:15px;
    color:var(--dt-ink-950);
}
#add_place #loginform input[type="text"]:focus,
#add_place #loginform input[type="password"]:focus,
#add_place #registration_form input[type="text"]:focus,
#add_place #registration_form input[type="password"]:focus{
    border-color:var(--dt-terracotta) !important;
    outline:none;
    box-shadow:0 0 0 3px rgba(198,96,42,.14);
}
/* The terms checkbox shares .row with the text fields, so it has to opt
   out of the full-width treatment above. */
#add_place #registration_form input#terms{
    display:inline-block;
    width:auto !important;
    height:auto !important;
    vertical-align:middle;
    accent-color:var(--dt-terracotta);
    margin:0 !important;
    padding:0 !important;
    border:none !important;
}
#add_place #registration_form input#terms + label{
    display:inline;
    margin-left:8px;
    font-weight:400;
    font-size:13.5px;
    color:var(--dt-ink-800);
}
#add_place #registration_form input#terms + label a{
    color:var(--dt-terracotta);
    text-decoration:underline;
}
#add_place #loginform input.submit,
#add_place #registration_form input.submit{
    display:inline-block;
    width:auto !important;
    height:auto !important;
    margin:4px 0 0 !important;
    padding:13px 28px !important;
    border:none !important;
    border-radius:var(--dt-radius) !important;
    background:var(--dt-terracotta) !important;
    color:var(--dt-paper-hi) !important;
    font-family:'Archivo',sans-serif;
    font-size:13.5px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    text-shadow:none;
    cursor:pointer;
    transition:background .15s ease;
}
#add_place #loginform input.submit:hover,
#add_place #registration_form input.submit:hover{
    background:var(--dt-ink-950) !important;
}
#add_place #loginform .forgot_password{
    display:inline-block;
    margin-left:16px;
    font-family:'Archivo',sans-serif;
    font-size:13px;
    color:var(--dt-zellige);
    text-decoration:underline;
}
#add_place #loginform .forgot_password:hover{color:var(--dt-terracotta);}
#add_place #registration_form span[id$="_error"],
#add_place #registration_form .term_error{
    display:block;
    font-family:'Archivo',sans-serif;
    font-size:12.5px;
    color:var(--dt-terracotta);
    margin-top:5px;
}
#add_place #registration_form span[id$="_error"]:empty,
#add_place #registration_form .term_error:empty{margin-top:0;}
#add_place #loginform input.error,
#add_place #registration_form input.error{
    border-color:var(--dt-terracotta) !important;
}
@media only screen and (max-width:620px){
    #add_place #loginform,
    #add_place #registration_form{padding:22px 18px 24px;}
    #add_place #loginform .forgot_password{
        display:block;
        margin:12px 0 0;
    }
}

/* =====================================================================
   Winning against the stock UX layer
   =====================================================================
   library/css/gc_geocraft_ux.css is an earlier redesign of this same
   screen. It carries its own palette (--gc-primary #0c5b7f, a blue;
   grey surfaces; 6px radius) and its header says it is deliberately
   loaded last so it wins on equal specificity. It is <link>ed from
   inside listing_submit_form.php, i.e. in the body — after this file,
   which is enqueued in the head.

   So position cannot settle it: these rules have to out-specify it.
   Each selector below is one step more specific than the stock rule it
   answers, and nothing more. Where the two agree, the stock rule is
   left alone.

   Not a blanket reset: gc_geocraft_ux.css still styles the dashboard
   and the listing preview, which the desert layer does not cover.
   ===================================================================== */

/* Stock: #add_place #packages_checkbox .package  → white card, grey
   border, 6px radius, its own shadow. The desert card is the <label>
   inside, so both rendered and the packages appeared as a box inside a
   box. The wrapper goes back to being a wrapper. */
#add_place #packages_checkbox div.package{
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    margin-bottom:11px;
}
#add_place #packages_checkbox div.package:hover{
    background:none;
    box-shadow:none;
}
/* Selected state was a blue ring from --gc-primary on a terracotta
   page. Same idea, this palette's accent. */
#add_place #packages_checkbox div.package.gc-selected{
    border:0;
    box-shadow:none;
}
#add_place #packages_checkbox div.package.gc-selected > label{
    border-color:var(--dt-terracotta);
    box-shadow:0 0 0 2px rgba(198,96,42,.20);
}
#add_place #packages_checkbox div.package .pkg_ct h3{font-size:16.5px;}

/* Stock: #add_place .select_cat → grey soft background + its own
   padding, under the desert category box that already provides both. */
#add_place ul.select_cat{
    background:none;
    padding:0;
    border-radius:0;
}

/* Stock: #add_place .form_row → a white card with a grey border and
   6px radius around EVERY field, plus `padding: 16px !important`.
   That is a different idea of the same form: the desert layout is
   label-above-field on the page's own paper, so every row was being
   boxed and the screen read as a stack of white tiles on a warm ground.

   div.form_row is one element more specific than the stock selector,
   which is what it takes to win — and the padding needs !important
   only because theirs has it. */
#add_place div.form_row{
    background:none;
    border:0;
    border-radius:0;
    padding:0 !important;
}

/* Stock: #place_header ul.step li carries its own
   `background: none !important` and `padding: 0 8px 0 0 !important`,
   sized for the *stock* step design (a vertical badge with the label
   below it and a connecting ::after line between badges). The desert
   pills are a horizontal badge-then-label design with no connecting
   line, but !important can only be matched, never out-specified by
   selector alone - hence !important here too, only where theirs has it.

   Left alone, the stripped background meant the current step's light
   label text had nothing dark behind it and read as blank, and the
   leftover ::after line drew a 2px bar straight through the middle of
   every earlier pill - which is what looked like strikethrough text. */
.sub-wrapper #place_header ul.step li{
    background:var(--dt-paper-hi) !important;
    padding:8px 16px 8px 9px !important;
}
.sub-wrapper #place_header ul.step li.previous,
.sub-wrapper #place_header ul.step li.lastprev{
    background:var(--dt-paper-hi) !important;
}
.sub-wrapper #place_header ul.step li.current{
    background:var(--dt-ink-950) !important;
}
.sub-wrapper #place_header ul.step li::after{
    content:none !important;
    display:none !important;
}

/* Step 2's table.ar_desc / article_slider overflow and sizing fixes
   that used to live here were folded into the full dt-prev-* layout
   above (2026-08-26) - see that section instead. */

/* =====================================================================
   Density pass — 2026-08-22
   =====================================================================
   The form is long by nature: ~20 stacked full-width rows, five of them
   identical image uploaders. Nothing here removes a field or changes
   what is asked; it takes back the vertical space the layout was
   spending on air, so the page needs materially less scrolling to reach
   the package chooser and the submit button.

   Deliberately not shrinking the type or the tap targets: inputs stay
   at 42px, comfortably above the 40px a thumb needs.
   ===================================================================== */

#add_place div.form_row{margin-bottom: 0px;}
#add_place .form_row .label label{margin-bottom:4px;}
#add_place .form_row .field input[type="text"],
#add_place .form_row .field input[type="email"],
#add_place .form_row .field input[type="url"],
#add_place .form_row .field input[type="password"],
#add_place .form_row .field select{height:42px;}
#add_place .description{margin-top:4px;line-height:1.4;}
#add_place h4.row_title{margin:28px 0 14px;}
.sub-wrapper{padding-bottom:48px;}
.sub-wrapper #place_header{padding:26px 0 18px;margin-bottom:22px;}

/*
 * The five image uploaders were the worst of it: each spent three lines
 * (label, then a full-width text input, then the Upload button pushed
 * onto its own line because the input is width:100%). Putting the input
 * and its button on one line gives roughly 50px back per uploader.
 *
 * :has() is already used in this file for the logged-out gate, so it is
 * an accepted dependency here. Browsers without it simply keep the old
 * stacked arrangement — longer, never broken.
 */
#add_place .form_row:has(.upload_button_div) .field > div{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:0 !important;
}
#add_place .form_row:has(.upload_button_div) .field > div > input[type="text"]{
    flex:1;
    min-width:0;
}
#add_place .form_row:has(.upload_button_div) .upload_button_div{
    display:flex !important;
    flex:none;
}
#add_place .form_row:has(.upload_button_div) .upload_button_div input.button{
    white-space:nowrap;
    height:42px;
    padding:0 16px;
    cursor:pointer;
}

/* The two rich-text editors carry the theme's own margins on top of
   ours; the wrapper is what actually sets their footprint. */
#add_place .form_row .wp-editor-wrap{margin-bottom:0;}
#add_place .form_row .field textarea{height:120px;}

@media only screen and (max-width:620px){
    /* One line stops fitting once the column is phone-width. */
    #add_place .form_row:has(.upload_button_div) .field > div{
        flex-direction:column;
        align-items:stretch;
        gap:7px;
    }
}