:root{--pikiin-green:#26bab4;--pikiin-green-soft:#e8f8f7;--pikiin-green-border:#cfeeed;--pikiin-red:#e62d28} #listing-form.pikiin-listing-form-ready{max-width:100%} .pikiin-form-section{background:#fff;border:1px solid #e8e8e8;border-radius:10px;padding:22px 22px 10px;margin:0 0 22px} .pikiin-form-section__title{margin:0 0 18px;font-size:28px!important;line-height:1.25;font-weight:400!important} .pikiin-form-section .row{margin-left:-8px;margin-right:-8px}.pikiin-form-section [class*="col-"]{padding-left:8px;padding-right:8px} .pikiin-help-text,.pikiin-note{display:block;margin:6px 0 12px;font-size:13px;line-height:1.45;color:#626262} .pikiin-note--important{padding:12px 14px;border-radius:6px;background:var(--pikiin-red);color:#fff} .pikiin-photos-help,.pikiin-ai-photo-note{width:100%;margin-left:0;margin-right:0;box-sizing:border-box} .pikiin-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;margin-left:5px;border:1px solid currentColor;border-radius:50%;font-size:11px;line-height:1;cursor:help;vertical-align:1px;opacity:.78} .pikiin-floating-tooltip{position:fixed;z-index:2147483647;width:260px;max-width:calc(100vw - 20px);padding:10px 12px;border-radius:7px;background:var(--pikiin-green);color:#fff;font-size:12px;font-weight:400;line-height:1.45;box-shadow:0 6px 22px rgba(0,0,0,.22);pointer-events:none} .pikiin-char-count{text-align:right;margin-top:5px;font-size:12px;color:#777}.pikiin-char-count.is-over{font-weight:700} .pikiin-field-error{display:block;color:#b42318;font-size:12px;margin-top:5px} .pikiin-field-invalid .form-control,.pikiin-field-invalid .select2-selection,.pikiin-field-invalid #dropzone,.pikiin-field-invalid .avatar-or-brand{border-color:#b42318!important} .pikiin-inline-check{margin-top:6px;font-size:13px} .pikiin-final-checks .form-group{margin-bottom:12px}.pikiin-check-row{display:flex;align-items:flex-start;gap:9px}.pikiin-check-row input[type="checkbox"]{flex:0 0 auto;margin:4px 0 0}.pikiin-check-row label{font-weight:400;line-height:1.45;margin:0;cursor:pointer} .pikiin-account-email[readonly]{background:#f7f7f7;cursor:default} #listing-form .pikiin-hidden-compat,#listing-form .pikiin-source-section-hidden,#listing-form #timezone,#listing-form [name="breakfrom[]"],#listing-form [name="breakto[]"]{display:none!important} #listing-form .pikiin-break-wrapper{display:none!important} #sell-for-me{display:none!important} /* Description editor: Bold + ordered/bulleted lists only. */ #listing-form .jqte_toolbar .jqte_tool{display:none}#listing-form .jqte_toolbar .jqte_tool_4,#listing-form .jqte_toolbar .jqte_tool_7,#listing-form .jqte_toolbar .jqte_tool_8{display:inline-block} /* Child categories live directly below Business Category. */ #listing-form #cat_features>h4{display:none!important} #listing-form #cat_features{margin-top:2px;margin-bottom:8px} #listing-form #cat_features .pikiin-category-choice-help{margin-bottom:10px} #listing-form #cat_features>.category-based-features>.amenities-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px;margin:0;padding:0;list-style:none} #listing-form #cat_features .amenities-list li{width:100%!important;max-width:none!important;float:none!important;min-width:0;margin:0;padding:0;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;column-gap:6px} #listing-form #cat_features .amenities-list li>input[type="checkbox"]{grid-column:1;margin:3px 0 0!important} #listing-form #cat_features .amenities-list li>label{grid-column:2;width:100%!important;max-width:none!important;margin:0!important;line-height:1.4;font-weight:400!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important} #listing-form #cat_features .amenities-list.child-categories{grid-column:2;display:block;margin:7px 0 0;padding:0;list-style:none} #listing-form #cat_features .amenities-list.child-categories li{margin:7px 0} #listing-form #additional_fields>h4{display:none!important} /* Gallery polish. */ #listing-form #dropzone{min-height:170px;padding:18px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;box-sizing:border-box} #listing-form #dropzone .dz-message{width:100%;font-family:inherit!important;font-style:normal!important;font-weight:400!important;font-size:18px!important;line-height:1.4!important;color:#444!important;margin:auto!important;text-align:center} #listing-form #dropzone .dz-message *{font-family:inherit!important;font-style:normal!important;font-weight:400!important} #listing-form #dropzone .dz-preview{margin:6px!important} #listing_msgz .custom-alert__heading,#listing_msgz .custom-alert__icon{display:none!important} #listing_msgz .custom-alert__body{margin-left:0!important} /* Logo + video row. */ .pikiin-hide-original-logo-edit{display:none!important} .pikiin-upload-logo-text{display:inline-block;margin:9px 0 0;padding:8px 13px;border-radius:5px;background:var(--pikiin-green);color:#fff;font-weight:500;cursor:pointer} .pikiin-upload-logo-text:hover,.pikiin-upload-logo-text:focus{color:#fff;opacity:.92} .l_blogo_form .avatar-or-brand{margin-bottom:0} /* Business hours: Pikiin palette, cleaner hierarchy. */ #listing-form .l_bhours_form label.control-label{color:#222!important;font-weight:400!important;font-size:15px!important} #listing-form .l_bhours_form .frontend_hours label{font-weight:400!important;color:#222!important} #listing-form .l_bhours_form .panel.with-nav-tabs.panel-info{border-color:var(--pikiin-green-border)!important} #listing-form .l_bhours_form .panel-info>.panel-heading{background:var(--pikiin-green-soft)!important;border-color:var(--pikiin-green-border)!important} #listing-form .l_bhours_form .nav-tabs{border-bottom:0!important} #listing-form .l_bhours_form .nav-tabs>li>a{background:transparent!important;border-color:transparent!important;color:#287c78!important;font-weight:500!important} #listing-form .l_bhours_form .nav-tabs>li.active>a,#listing-form .l_bhours_form .nav-tabs>li.active>a:hover,#listing-form .l_bhours_form .nav-tabs>li.active>a:focus{background:var(--pikiin-green)!important;border-color:var(--pikiin-green)!important;color:#fff!important} #listing-form .l_bhours_form .panel-body{border-top:1px solid var(--pikiin-green-border)!important} @media(max-width:991px){#listing-form #cat_features>.category-based-features>.amenities-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:767px){.pikiin-form-section{padding:18px 15px 8px}.pikiin-form-section__title{font-size:24px!important}#listing-form #cat_features>.category-based-features>.amenities-list{grid-template-columns:1fr}.pikiin-check-row{gap:8px}} /* v0.1.3 refinements */ .pikiin-section-intro{margin:-4px 0 14px;color:#626262;font-size:14px;line-height:1.5} #listing-form .has-success .control-label{color:var(--pikiin-green)!important} #listing-form .has-success .form-control,#listing-form .has-success .input-group-addon,#listing-form .has-success .select2-selection{border-color:var(--pikiin-green)!important} /* Use a dedicated, relevant upload status immediately below the gallery. */ #listing-form #listing_msgz{display:none!important} .pikiin-upload-status{display:none;margin:10px 0 12px;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.4} .pikiin-upload-status.is-working{display:block;background:#f4f4f4;color:#555} .pikiin-upload-status.is-success{display:block;background:var(--pikiin-green-soft);color:#176d69;border:1px solid var(--pikiin-green-border)} .pikiin-upload-status.is-error{display:block;background:#fde8e7;color:#a51f1b;border:1px solid #f3c4c1} /* Category-specific dynamic fields now live inside More about your business. */ #listing-form #additional_fields{margin-top:18px} #listing-form #additional_fields>h4{display:block!important;margin:0 0 12px;font-size:18px;font-weight:500;color:#222} /* Logo and video should read as one balanced media row. */ @media(min-width:768px){ #listing-form .pikiin-media-bottom{display:flex;align-items:center} #listing-form .pikiin-media-bottom>[class*="col-"]{float:none} } /* Business-hours widget: override DWT blue/black theme styling after the wrapper is moved. */ #listing-form .pikiin-hours-section label.control-label, #listing-form .pikiin-hours-section .frontend_hours label, #listing-form .pikiin-hours-section strong{color:#222!important;font-weight:400!important;font-size:15px!important} #listing-form .pikiin-hours-section .panel, #listing-form .pikiin-hours-section .panel.with-nav-tabs.panel-info{border-color:var(--pikiin-green-border)!important} #listing-form .pikiin-hours-section .panel-heading, #listing-form .pikiin-hours-section .panel-info>.panel-heading{background:var(--pikiin-green-soft)!important;border-color:var(--pikiin-green-border)!important} #listing-form .pikiin-hours-section .nav-tabs{border-bottom:0!important;background:transparent!important} #listing-form .pikiin-hours-section .nav-tabs>li>a{background:transparent!important;border-color:transparent!important;color:#267b77!important;font-weight:500!important} #listing-form .pikiin-hours-section .nav-tabs>li.active>a, #listing-form .pikiin-hours-section .nav-tabs>li.active>a:hover, #listing-form .pikiin-hours-section .nav-tabs>li.active>a:focus{background:var(--pikiin-green)!important;border-color:var(--pikiin-green)!important;color:#fff!important} #listing-form .pikiin-hours-section .panel-body{border-top:1px solid var(--pikiin-green-border)!important} /* v0.1.4 gallery, media and dynamic-field refinements */ #listing-form #dropzone{position:relative} #listing-form #dropzone .pikiin-add-photos{ display:flex;flex-direction:column;align-items:center;justify-content:center; width:118px;height:118px;margin:6px;border:2px dashed var(--pikiin-green); border-radius:10px;background:#fff;color:var(--pikiin-green);cursor:pointer; font:inherit;order:999; } #listing-form #dropzone .pikiin-add-photos-plus{font-size:40px;line-height:.9;font-weight:300} #listing-form #dropzone .pikiin-add-photos-text{font-size:13px;margin-top:8px} #listing-form #dropzone .dz-preview{position:relative;cursor:move} #listing-form #dropzone .pikiin-cover-preview{outline:2px solid var(--pikiin-green);outline-offset:2px;border-radius:8px} #listing-form #dropzone .pikiin-cover-badge{ position:absolute;left:5px;top:5px;z-index:5;background:var(--pikiin-green);color:#fff; border-radius:4px;padding:3px 6px;font-size:10px;line-height:1.2;pointer-events:none } #listing-form .pikiin-additional-inline{ float:none!important;width:100%!important;padding:0!important;margin:18px 0 0!important; } #listing-form .pikiin-additional-inline>h4{display:none!important} #listing-form .pikiin-additional-inline .additional_field, #listing-form .pikiin-additional-inline .additional_custom_fields{margin:0!important} #listing-form .pikiin-media-bottom .l_blogo_form .form-group{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; } #listing-form .pikiin-media-bottom .l_blogo_form .control-label{flex:0 0 100%} #listing-form .pikiin-media-bottom .pikiin-upload-logo-text{margin:0} #listing-form .pikiin-media-bottom .l_video_form{align-self:center} #listing-form .pikiin-media-bottom .l_video_form .form-group{margin-bottom:0} #listing-form .pikiin-hours-section .panel-heading{background:#e8f8f7!important;border-color:#cfeeed!important} #listing-form .pikiin-hours-section .nav-tabs>li.active>a{background:#26bab4!important;color:#fff!important;border-color:#26bab4!important} #listing-form .pikiin-hours-section .form-group.has-success>label.control-label{color:#222!important;font-weight:400!important} /* v0.1.5 validation, dynamic fields and native hours refinements */ /* Keep labels neutral; only the active/valid field border uses Pikiin green. */ #listing-form .form-group.has-success>label.control-label, #listing-form .form-group.has-success label.control-label, #listing-form .pikiin-form-section .has-success .control-label{color:#222!important;font-weight:400!important} #listing-form .form-control:focus, #listing-form .custom-select:focus, #listing-form .select2-container--focus .select2-selection, #listing-form .has-success .form-control, #listing-form .has-success .input-group-addon, #listing-form .has-success .select2-selection{border-color:var(--pikiin-green)!important;box-shadow:0 0 0 1px rgba(38,186,180,.12)!important} #listing-form .has-success .input-group-addon i{color:#555!important} /* DWT's original custom-field wrapper remains only as an AJAX source shell. */ #listing-form #additional_fields.pikiin-additional-source{display:block!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;overflow:visible!important} #listing-form #additional_fields.pikiin-additional-source>h4{display:none!important} #listing-form .pikiin-business-details-slot{margin:18px 0 0;padding:0;width:100%} #listing-form .pikiin-business-details-slot .additional_field, #listing-form .pikiin-business-details-slot .additional_custom_fields{margin:0!important;padding:0!important;width:100%!important;float:none!important} /* Native business-hours controls replace DWT's one-item autocomplete dropdown. */ #listing-form .pikiin-hours-section input[type="time"]{ width:100%;height:46px;padding:10px 12px;border:1px solid #ddd;border-radius:3px; background:#fff;color:#333;font:inherit;box-shadow:none } #listing-form .pikiin-hours-section input[type="time"]:focus{outline:none;border-color:var(--pikiin-green)!important;box-shadow:0 0 0 1px rgba(38,186,180,.12)} /* v0.1.6 agreed refinements */ /* Focus-only Pikiin green: completed/valid fields return to neutral after focus leaves. */ #listing-form .form-group.has-success>label.control-label, #listing-form .form-group.has-success label.control-label, #listing-form .pikiin-form-section .has-success .control-label{color:#222!important;font-weight:400!important} #listing-form .form-group.has-success .form-control:not(:focus), #listing-form .form-group.has-success .custom-select:not(:focus), #listing-form .form-group.has-success .input-group-addon, #listing-form .form-group.has-success .select2-selection{border-color:#ddd!important;box-shadow:none!important} #listing-form .form-control:focus, #listing-form .custom-select:focus, #listing-form .input-group:focus-within .form-control, #listing-form .input-group:focus-within .input-group-addon, #listing-form .select2-container--focus .select2-selection{border-color:var(--pikiin-green)!important;box-shadow:0 0 0 1px rgba(38,186,180,.12)!important} /* Selected Pikiin tags are a selected-state colour, not another red action button. */ #listing-form #pikiin_listing_tags_select + .select2-container .select2-selection__choice, #listing-form .l_tags_form .select2-selection__choice{ background:var(--pikiin-green)!important; border-color:var(--pikiin-green)!important; color:#fff!important; border-radius:4px!important; } #listing-form #pikiin_listing_tags_select + .select2-container .select2-selection__choice__remove, #listing-form .l_tags_form .select2-selection__choice__remove{ color:#fff!important; opacity:.9; } #listing-form #pikiin_listing_tags_select + .select2-container .select2-selection__choice__remove:hover, #listing-form .l_tags_form .select2-selection__choice__remove:hover{color:#fff!important;opacity:1} /* Category-specific fields live inside More about your business under one neutral subheading. */ #listing-form .pikiin-business-details-slot{margin-top:20px!important} #listing-form .pikiin-business-features-title{ margin:0 0 14px!important; font-size:18px!important; line-height:1.35!important; font-weight:500!important; color:#222!important; } #listing-form .pikiin-hide-redundant-feature-heading{display:none!important} /* v0.1.7 logo replacement and cleanup */ #listing-form .pikiin-hide-logo-delete,#listing-form #brand-del.brand-delete{display:none!important} /* v0.1.8: business operation selector */ #listing-form .pikiin-operation-field { margin-bottom: 8px; } #listing-form .pikiin-operation-choices { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; } #listing-form .pikiin-operation-choice { display:inline-flex; align-items:center; gap:7px; margin:0; padding:9px 13px; border:1px solid #d9d9d9; border-radius:4px; background:#fff; font-weight:400; cursor:pointer; } #listing-form .pikiin-operation-choice input { margin:0; } #listing-form .pikiin-operation-choice:has(input:checked) { border-color:#26bab4; background:#e8f8f7; } @media (max-width:767px){ #listing-form .pikiin-operation-choices { flex-direction:column; gap:8px; } #listing-form .pikiin-operation-choice { width:100%; } } /* v0.1.9 branch support */ #listing-form .pikiin-branch-context{margin:0 0 20px;padding:22px;border:1px solid #29b7b4;border-radius:10px;background:#29b7b4;color:#fff} #listing-form .pikiin-branch-context__title{margin:0 0 14px;font-size:28px!important;line-height:1.25;font-weight:400!important;color:#fff} #listing-form .pikiin-branch-context p{margin:5px 0;color:#fff} #listing-form .pikiin-branch-context__main{font-size:15px;line-height:1.5} #listing-form .pikiin-branch-context__business{display:inline;font-size:inherit;margin:0;font-weight:700;color:#fff} #listing-form .pikiin-branch-context__secondary{font-size:13px;line-height:1.45;opacity:.95} @media(max-width:767px){#listing-form .pikiin-branch-context{padding:18px 15px}#listing-form .pikiin-branch-context__title{font-size:24px!important}} #listing-form .pikiin-locked-business-name{background:#f5f6f7!important;color:#555!important;cursor:not-allowed} #listing-form .pikiin-branch-field .pikiin-help-text,#listing-form .pikiin-business-lock-note{display:block;margin-top:6px;color:#666;font-size:13px;line-height:1.45} /* DWT custom fields retain their native category-based visibility and controls. */ #listing-form .pikiin-more-section > #additional_fields { height:auto; min-height:0; margin:16px 0; overflow:visible; } /* v0.3.6: surgical visual fixes only. */ #listing-form .submit-post-button{ background:transparent!important; border-color:transparent!important; } #listing-form .submit-post-button .btn.sonu-button{ background:var(--pikiin-green)!important; border-color:var(--pikiin-green)!important; color:#fff!important; } #listing-form .submit-post-button .btn.sonu-button:hover, #listing-form .submit-post-button .btn.sonu-button:focus{ background:var(--pikiin-green)!important; border-color:var(--pikiin-green)!important; color:#fff!important; opacity:.92; } #listing-form .pikiin-media-bottom .l_blogo_form .form-group{ column-gap:20px; row-gap:4px; } #listing-form .pikiin-media-bottom .l_blogo_form .control-label{ margin-bottom:0!important; } #listing-form .pikiin-media-bottom .l_blogo_form .avatar-or-brand{ margin-top:0!important; } /* v0.3.7: real pre-submit preview, gallery guidance and legacy Tipsy cleanup. */ .tipsy:empty{display:none!important} #listing-form .pikiin-photo-order-help{display:block;margin-top:6px;font-weight:500;color:#333} body.pikiin-preview-open{overflow:hidden} .pikiin-preview-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px} .pikiin-preview-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58)} .pikiin-preview-panel{position:relative;z-index:1;width:min(940px,96vw);max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden} .pikiin-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid #ececec;background:#fff} .pikiin-preview-eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pikiin-green);margin-bottom:4px} .pikiin-preview-head h2{margin:0;color:#222;font-size:28px;line-height:1.2;font-weight:600} .pikiin-preview-subtitle{margin:5px 0 0;color:#666} .pikiin-preview-close{border:0;background:transparent;color:#555;font-size:34px;line-height:1;padding:0 2px;cursor:pointer} .pikiin-preview-body{padding:26px;overflow:auto;background:#fafafa} .pikiin-preview-gallery{margin-bottom:24px} .pikiin-preview-hero{position:relative;width:100%;height:340px;border-radius:10px;overflow:hidden;background:#eee} .pikiin-preview-hero img{width:100%;height:100%;object-fit:cover;display:block} .pikiin-preview-cover-label{position:absolute;left:14px;top:14px;padding:5px 9px;border-radius:5px;background:var(--pikiin-green);color:#fff;font-size:12px;font-weight:600} .pikiin-preview-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px} .pikiin-preview-thumbs img{width:100%;height:105px;object-fit:cover;border-radius:7px;background:#eee} .pikiin-preview-intro{display:flex;align-items:center;gap:16px;padding:20px;background:#fff;border:1px solid #ececec;border-radius:10px;margin-bottom:18px} .pikiin-preview-logo{width:74px;height:74px;object-fit:cover;border-radius:50%;border:1px solid #eee;background:#fff;flex:0 0 auto} .pikiin-preview-intro h3{margin:0 0 4px;color:#222;font-size:24px;font-weight:600} .pikiin-preview-branch,.pikiin-preview-category{color:#666;margin-top:2px} .pikiin-preview-section{padding:20px;background:#fff;border:1px solid #ececec;border-radius:10px;margin-top:18px} .pikiin-preview-section h4{margin:0 0 12px;color:#222;font-size:18px;font-weight:600} .pikiin-preview-section p{margin:0;white-space:pre-line;color:#444;line-height:1.65} .pikiin-preview-details{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:0} .pikiin-preview-detail{padding:10px 0;border-bottom:1px solid #f0f0f0;min-width:0} .pikiin-preview-detail dt{font-size:12px;color:#777;font-weight:500;margin-bottom:3px} .pikiin-preview-detail dd{margin:0;color:#222;overflow-wrap:anywhere} .pikiin-preview-detail a{color:#187f7a;text-decoration:none} .pikiin-preview-hours>div{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-bottom:1px solid #f0f0f0} .pikiin-preview-hours>div:last-child{border-bottom:0} .pikiin-preview-hours span{color:#555}.pikiin-preview-hours strong{color:#222;font-weight:500} .pikiin-preview-note{margin:18px 2px 0;color:#777;font-size:12px;line-height:1.5} .pikiin-preview-actions{display:flex;justify-content:flex-end;gap:12px;padding:18px 26px;border-top:1px solid #ececec;background:#fff} .pikiin-preview-actions .btn{min-width:140px;padding:11px 18px;border-radius:5px;font-size:15px} .pikiin-preview-edit{background:#fff!important;border:1px solid #ccc!important;color:#333!important} .pikiin-preview-submit{background:var(--pikiin-green)!important;border:1px solid var(--pikiin-green)!important;color:#fff!important} .pikiin-preview-submit:hover,.pikiin-preview-submit:focus{opacity:.92;color:#fff!important} .pikiin-preview-submit[disabled]{opacity:.65;cursor:wait} @media(max-width:767px){ .pikiin-preview-modal{padding:10px}.pikiin-preview-panel{width:100%;max-height:96vh}.pikiin-preview-head,.pikiin-preview-body,.pikiin-preview-actions{padding-left:16px;padding-right:16px} .pikiin-preview-hero{height:230px}.pikiin-preview-thumbs{grid-template-columns:repeat(2,1fr)}.pikiin-preview-thumbs img{height:90px} .pikiin-preview-details{grid-template-columns:1fr}.pikiin-preview-actions{flex-direction:column-reverse}.pikiin-preview-actions .btn{width:100%} } /* v0.3.8: explicit sortable gallery affordance */ #listing-form #dropzone.pikiin-sortable-ready .dz-preview{cursor:grab;touch-action:pan-y} #listing-form #dropzone.pikiin-sortable-ready .dz-preview.ui-sortable-helper{cursor:grabbing;opacity:.9} #listing-form #dropzone .pikiin-photo-sort-placeholder{display:inline-block;width:140px;height:178px;margin:0 12px 12px 0;border:2px dashed #29b7b4;border-radius:12px;background:rgba(41,183,180,.06);vertical-align:top} /* v0.3.9: make cover-image instruction immediate and visible. */ #listing-form .pikiin-photo-order-help{margin:2px 0 10px;font-size:13px;line-height:1.45;color:#626262} /* v0.3.12: conditional Instagram requirement and edit-state cleanup. */ #listing-form .pikiin-instagram-help{margin-top:6px} #listing-form .pikiin-instagram-none{margin-top:8px} #listing-form .pikiin-instagram-none label{font-weight:400;color:#444;cursor:pointer} #listing-form [name="listing_insta"]:disabled{background:#f5f6f7!important;color:#888!important;cursor:not-allowed} /* Shops: unobtrusive product-list field */ .pikiin-shop-example-button{background:#08a9a6;color:#fff;border:0;border-radius:6px;padding:11px 17px;font-weight:700;cursor:pointer;margin-top:11px} .pikiin-shop-example-button:hover,.pikiin-shop-example-button:focus{background:#087f80;color:#fff} .pikiin-shop-example{padding:16px;margin-top:12px;background:#f3fbfb;border:1px solid #cdeceb;border-radius:8px} .pikiin-shop-products textarea{width:100%;min-height:122px} .pikiin-structured-section{margin:20px 0;padding:16px;border:1px solid #e1e8e9;border-radius:6px}.pikiin-search-options{display:flex;flex-wrap:wrap;gap:8px 18px;margin:9px 0}.pikiin-search-option{display:inline-flex;gap:5px;align-items:center;font-weight:400!important;font-size:14px}.pikiin-search-field{margin:16px 0} /* v0.3.23 — Consistent, seamless Pikiin listing-form presentation. Maintains the original DWT inputs, their names, values and AJAX ownership. Preserve the existing 22px section spacing and 16px form column gutters. */ body:has(#listing-form.pikiin-listing-form-ready){background:#f7f9f9!important} #listing-form.pikiin-listing-form-ready{font-size:14px;color:#292929} #listing-form .pikiin-form-section{ background:transparent!important;border:0!important;box-shadow:none!important; border-radius:0!important;margin:0 0 22px!important; padding:22px 22px 10px!important; } #listing-form .pikiin-form-section+.pikiin-form-section{border-top:1px solid #e2e7e7!important} #listing-form .pikiin-form-section__title{ display:flex!important;align-items:center;gap:12px; margin:0 0 18px!important;font-size:26px!important;line-height:1.25!important; font-weight:600!important;letter-spacing:-.025em;color:#252525!important; } #listing-form .pikiin-section-number{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:32px;height:32px;border-radius:50%;background:var(--pikiin-green); color:#fff;font-size:15px;line-height:1;font-weight:700;letter-spacing:0; } #listing-form .pikiin-form-section .control-label, #listing-form .pikiin-form-section label.control-label{font-size:14px!important;line-height:1.4!important;color:#292929!important} #listing-form .pikiin-section-intro{font-size:14px!important;line-height:1.5!important} #listing-form .pikiin-help-text{font-size:13px!important;line-height:1.45!important} /* DWT custom fields must remain physically attached to #additional_fields so theme AJAX can update them. Only style its visible presentation. */ #listing-form .pikiin-more-section #additional_fields{ margin:18px 0 6px!important;padding:0!important;width:100%!important; background:transparent!important;border:0!important;box-shadow:none!important; } #listing-form .pikiin-more-section #additional_fields>h4{display:none!important} #listing-form .pikiin-more-section #additional_fields .additional_field, #listing-form .pikiin-more-section #additional_fields .additional_custom_fields{ background:transparent!important;padding:0!important;margin:0!important; border:0!important;box-shadow:none!important; } #listing-form .pikiin-more-section #additional_fields .form-group{margin:0 0 18px!important} #listing-form .pikiin-more-section #additional_fields .form-group:last-child{margin-bottom:0!important} #listing-form .pikiin-more-section #additional_fields .fields-custom-text, #listing-form .pikiin-more-section #additional_fields .control-label{ font-size:15px!important;line-height:1.4!important;font-weight:600!important; color:#292929!important;margin:0 0 10px!important; } #listing-form .pikiin-more-section #additional_fields .amenities-list, #listing-form .pikiin-more-section #additional_fields ul.amenities-list{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 20px!important;padding:0!important;margin:0!important; background:transparent!important;list-style:none!important; } #listing-form .pikiin-more-section #additional_fields .amenities-list li{ float:none!important;width:auto!important;max-width:none!important; margin:0!important;padding:0!important;min-width:0!important; display:flex!important;align-items:flex-start!important;gap:8px!important; } #listing-form .pikiin-more-section #additional_fields .amenities-list label{ font-size:14px!important;font-weight:400!important;line-height:1.45!important; margin:0!important;color:#333!important;white-space:normal!important; } #listing-form .pikiin-more-section #additional_fields input[type=checkbox]{ accent-color:var(--pikiin-green);flex:0 0 auto;margin:2px 0 0!important; } #listing-form .pikiin-more-section #additional_fields .row{ margin-left:-8px!important;margin-right:-8px!important; } #listing-form .pikiin-more-section #additional_fields [class*=col-]{padding-left:8px!important;padding-right:8px!important} #listing-form #pikiin-structured-search-fields{background:transparent;border:0;border-top:1px solid #e2e7e7;border-radius:0;padding:18px 0;margin:18px 0} #listing-form #pikiin-structured-search-fields h3{font-size:18px;line-height:1.35;font-weight:600;margin:0 0 10px} @media(max-width:991px){ #listing-form .pikiin-more-section #additional_fields .amenities-list, #listing-form .pikiin-more-section #additional_fields ul.amenities-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:767px){ #listing-form .pikiin-form-section{padding:18px 15px 8px!important} #listing-form .pikiin-form-section__title{font-size:23px!important;gap:10px} #listing-form .pikiin-section-number{height:29px;width:29px;font-size:14px} #listing-form .pikiin-more-section #additional_fields .amenities-list, #listing-form .pikiin-more-section #additional_fields ul.amenities-list{grid-template-columns:1fr} } /* v0.3.24: firm label hierarchy; preserve existing row gaps and input sizing. */ #listing-form.pikiin-listing-form-ready .pikiin-form-section label.control-label, #listing-form.pikiin-listing-form-ready .pikiin-form-section .control-label, #listing-form.pikiin-listing-form-ready .pikiin-shop-products label { font-size:15px!important;font-weight:600!important;line-height:1.4!important; } #listing-form.pikiin-listing-form-ready .pikiin-form-section .pikiin-help-text, #listing-form.pikiin-listing-form-ready .pikiin-form-section .pikiin-section-intro { font-size:13px!important;font-weight:400!important;line-height:1.5!important; } /* Prevent the media section and uploader being constrained by inherited grid widths. */ #listing-form.pikiin-listing-form-ready .pikiin-form-section:has(#dropzone), #listing-form.pikiin-listing-form-ready .pikiin-form-section:has(#dropzone) > .pikiin-form-row, #listing-form.pikiin-listing-form-ready .pikiin-form-section:has(#dropzone) #dropzone { width:100%!important;max-width:100%!important;min-width:0!important; } #listing-form.pikiin-listing-form-ready .pikiin-form-section:has(#dropzone) > .pikiin-form-row { margin-left:-8px!important;margin-right:-8px!important; } #listing-form.pikiin-listing-form-ready .pikiin-form-section:has(#dropzone) .pikiin-form-row > [class*=col-] { box-sizing:border-box;min-width:0; } /* v0.3.25: approved white Pikiin form with sticky step index. */ body:has(#listing-form.pikiin-listing-form-ready){background:#f8fafb!important} #listing-form.pikiin-listing-form-ready{width:100%;max-width:100%;overflow:visible} .pikiin-form-wide-container{width:min(1260px,calc(100% - 30px))!important;max-width:1260px!important} .pikiin-form-wide-column{float:none!important;width:100%!important;max-width:100%!important;flex:0 0 100%!important} #listing-form .pikiin-form-layout{display:grid;grid-template-columns:195px minmax(0,1fr);gap:26px;align-items:start;overflow:visible} #listing-form .pikiin-form-main{min-width:0;background:#fff;border:1px solid #e8ecee;border-radius:14px;padding:24px 26px 5px;box-shadow:0 2px 16px rgba(27,42,45,.025)} #listing-form .pikiin-form-index{position:sticky;top:105px;align-self:start;max-height:calc(100vh - 125px);overflow:auto;padding:12px 0;z-index:3} #listing-form .pikiin-form-index-list{list-style:none;margin:0;padding:0} #listing-form .pikiin-form-index-list li{position:relative;margin:0;padding:0} #listing-form .pikiin-form-index-list li:not(:last-child):before{content:'';position:absolute;left:16px;top:38px;bottom:-5px;width:1px;background:#dce4e5} #listing-form .pikiin-form-index-link{display:flex;align-items:center;gap:12px;min-height:55px;padding:8px 0;text-decoration:none!important;color:#68747b!important;font-size:13px!important;font-weight:500!important;line-height:1.35} #listing-form .pikiin-index-circle{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#e9eef0;color:#333e43;font-size:14px;font-weight:600} #listing-form .pikiin-form-index-link.is-active{color:#19282d!important;font-weight:700!important} #listing-form .pikiin-form-index-link.is-active .pikiin-index-circle{background:var(--pikiin-green);color:#fff} #listing-form .pikiin-form-main>.pikiin-form-section{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:20px 0 18px!important;margin:0!important;background:#fff!important;border:0!important;border-bottom:1px solid #e8edef!important;border-radius:0!important;box-shadow:none!important;clear:both!important;float:none!important;display:block!important} #listing-form .pikiin-form-main>.pikiin-form-section+.pikiin-form-section{border-top:0!important} #listing-form .pikiin-form-main>.pikiin-form-section:last-child{border-bottom:0!important} #listing-form .pikiin-form-main>.pikiin-form-section>.pikiin-form-section__title{display:flex!important;align-items:center!important;width:100%!important;min-width:0!important;float:none!important;clear:both!important;white-space:normal!important;flex-wrap:nowrap!important;font-size:25px!important;font-weight:650!important;line-height:1.25!important;margin:0 0 18px!important} #listing-form .pikiin-form-main>.pikiin-form-section>.pikiin-form-section__title .pikiin-section-number{flex:0 0 33px!important} #listing-form .pikiin-form-main>.pikiin-form-section>.pikiin-form-row{width:100%!important;max-width:100%!important;box-sizing:border-box!important;clear:both!important} #listing-form .pikiin-form-main #additional_fields .additional_field{max-width:100%;box-sizing:border-box} #listing-form .pikiin-form-main #additional_fields .form-group{padding-top:10px!important;padding-bottom:12px!important;border-bottom:1px solid #e9edee!important} #listing-form .pikiin-form-main #additional_fields .form-group:last-child{border-bottom:0!important} #listing-form .pikiin-form-main #additional_fields .amenities-list{grid-template-columns:repeat(3,minmax(0,1fr))!important} #listing-form .pikiin-form-main #dropzone{min-height:155px;max-width:100%!important;box-sizing:border-box} #listing-form #dropzone .dz-message.pikiin-uploader-empty-prompt{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-height:130px;font-size:13px!important;color:#879398!important} #listing-form #dropzone .dz-message.pikiin-uploader-empty-prompt .pikiin-upload-icon{display:block;width:40px;height:40px;color:#88969d;margin-bottom:5px} #listing-form #dropzone .dz-message.pikiin-uploader-empty-prompt svg{display:block;width:100%;height:100%} #listing-form #dropzone .dz-message.pikiin-uploader-empty-prompt strong{font-size:15px;font-weight:650;color:#57636c} #listing-form #dropzone .dz-message.pikiin-uploader-empty-prompt span:last-child{font-size:13px;color:#89959b} #listing-form .pikiin-final-submit{max-width:100%;box-sizing:border-box} #listing-form .pikiin-form-main .pikiin-form-section:has(#dropzone)>.pikiin-form-row{width:100%!important} @media(max-width:991px){ #listing-form .pikiin-form-layout{grid-template-columns:1fr;gap:0} #listing-form .pikiin-form-index{position:sticky;top:0;max-height:none;background:#fff;border:1px solid #e8edef;border-radius:10px;padding:4px 12px;overflow-x:auto;overflow-y:hidden;margin-bottom:12px} #listing-form .pikiin-form-index-list{display:flex;min-width:max-content;gap:14px} #listing-form .pikiin-form-index-list li:before{display:none} #listing-form .pikiin-form-index-link{min-height:43px;gap:7px;font-size:12px!important} #listing-form .pikiin-index-circle{height:27px;width:27px;flex-basis:27px;font-size:12px} #listing-form .pikiin-form-main{padding:12px 18px 4px} } @media(max-width:767px){ .pikiin-form-wide-container{width:100%!important;padding-left:12px!important;padding-right:12px!important} #listing-form .pikiin-form-main{padding:10px 14px 4px} #listing-form .pikiin-form-main>.pikiin-form-section{padding:18px 0!important} #listing-form .pikiin-form-main>.pikiin-form-section>.pikiin-form-section__title{font-size:22px!important} #listing-form .pikiin-form-main #additional_fields .amenities-list{grid-template-columns:1fr!important} } /* v0.3.34 — one desktop layout. The DWT .container breaks out to the viewport; the form is then centred INSIDE it. No JS geometry/offsets. */ @media (min-width:992px) { .submit-listing .pikiin-form-wide-container { width:100vw !important; max-width:none !important; margin-left:calc(50% - 50vw) !important; margin-right:0 !important; left:auto !important; right:auto !important; transform:none !important; position:relative !important; padding:0 !important; box-sizing:border-box !important; } .submit-listing .pikiin-form-wide-container > .row { margin-left:0 !important; margin-right:0 !important; } .submit-listing .pikiin-form-wide-column { float:none !important; width:100% !important; max-width:100% !important; min-width:0 !important; padding:0 !important; margin:0 !important; flex:0 0 100% !important; } #listing-form.pikiin-listing-form-ready { width:calc(100vw - 96px) !important; max-width:1400px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; overflow:visible !important; } #listing-form .pikiin-form-layout { display:grid !important; grid-template-columns:250px minmax(0,1fr) !important; gap:24px !important; align-items:start !important; width:100% !important; min-width:0 !important; overflow:visible !important; } #listing-form .pikiin-form-index { grid-column:1 !important; grid-row:1 !important; position:sticky !important; top:90px !important; width:250px !important; max-width:250px !important; height:max-content !important; max-height:calc(100vh - 105px) !important; overflow-y:auto !important; overflow-x:hidden !important; transform:none !important; align-self:start !important; padding:10px 0 !important; box-sizing:border-box !important; z-index:5; } #listing-form .pikiin-form-main { grid-column:2 !important; grid-row:1 !important; width:100% !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; } #listing-form .pikiin-form-index-link { font-size:20px !important; line-height:1.3 !important; font-weight:500 !important; min-height:65px; gap:12px !important; padding:11px 0; } #listing-form .pikiin-form-index-link.is-active {font-weight:600 !important;} #listing-form .pikiin-index-circle { width:38px;height:38px;flex-basis:38px; font-size:18px !important;font-weight:600; } #listing-form .pikiin-form-index-list li:not(:last-child):before {left:18px;top:43px;} #listing-form .pikiin-index-label {flex:1;min-width:0;overflow-wrap:break-word;} .submit-listing:has(#listing-form.pikiin-listing-form-ready), .submit-listing .pikiin-form-wide-container, .submit-listing .pikiin-form-wide-container > .row, #listing-form .pikiin-form-layout {overflow:visible !important;} } @media (max-width:991px) { .pikiin-form-wide-container {left:auto !important;margin-left:auto !important;margin-right:auto !important;} #listing-form .pikiin-form-index-link {font-size:15px !important;} } #listing-form .pikiin-final-submit, #listing-form .pikiin-final-submit.submit-listing-section { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 14px 0 !important; margin-top: 12px !important; margin-bottom: 0 !important; border-radius: 0 !important; } #listing-form .pikiin-final-submit .submit-post-button { background: transparent !important; border: 0 !important; box-shadow: none !important; } @media (max-width: 991px) { .pikiin-form-wide-container {left:auto!important;margin-left:auto!important;margin-right:auto!important;} #listing-form .pikiin-form-index-link {font-size:15px!important;} }