/**
 * WWPosts Design System — Phase 3 form chrome
 * ============================================
 * Create / edit / register / profile section cards + controls on design tokens.
 * Additive: layout/behavior stay in cp-forms.css + page shells.
 *
 * Load after cp-forms.css and cp-discovery.css.
 */

/* -------------------------------------------------------------------------- */
/* Accent collapsible panels (form sections + Mass-import family)               */
/* Same face as discovery cards — no separate grey body band.                   */
/* -------------------------------------------------------------------------- */
.cp-user-group--market,
.cp-user-group--danger,
.cp-user-group--primary {
    background: var(--cp-raised) !important;
    border-radius: var(--cp-radius-lg) !important;
    overflow: hidden;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--cp-border) !important;
    box-shadow: var(--cp-shadow-md) !important;
}

.cp-user-group--market {
    border-color: color-mix(in srgb, var(--cp-cat-trail) 45%, var(--cp-border)) !important;
}

.cp-user-group--danger {
    border-color: color-mix(in srgb, var(--cp-danger) 45%, var(--cp-border)) !important;
}

.cp-user-group--primary {
    border-color: color-mix(in srgb, var(--cp-accent) 40%, var(--cp-border)) !important;
}

.cp-user-group--market .cp-user-group__toggle,
.cp-user-group--danger .cp-user-group__toggle,
.cp-user-group--primary .cp-user-group__toggle {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    /* Bottom lip only — avoid top inset/hairline that reads as a double header edge */
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22) !important;
    border: none !important;
    border-radius: var(--cp-radius-lg) var(--cp-radius-lg) 0 0 !important;
    margin: 0 !important;
}

.cp-user-group--market .cp-user-group__toggle.collapsed,
.cp-user-group--danger .cp-user-group__toggle.collapsed,
.cp-user-group--primary .cp-user-group__toggle.collapsed {
    border-radius: var(--cp-radius-lg) !important;
}

.cp-user-group--market .cp-user-group__toggle {
    background: var(--cp-cat-trail) !important;
    background-image: none !important;
}

.cp-user-group--danger .cp-user-group__toggle {
    background: var(--cp-danger) !important;
    background-image: none !important;
}

.cp-user-group--primary .cp-user-group__toggle {
    background: var(--cp-accent-strong) !important;
    background-image: none !important;
    color: var(--cp-accent-ink) !important;
    text-shadow: none;
}

.cp-user-group--market .cp-user-group__body,
.cp-user-group--danger .cp-user-group__body,
.cp-user-group--primary .cp-user-group__body {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--cp-ink);
}

.cp-user-group--market .cp-user-group__content,
.cp-user-group--danger .cp-user-group__content,
.cp-user-group--primary .cp-user-group__content {
    color: var(--cp-ink);
}

.cp-user-group--market .cp-collapsible-section-footer,
.cp-user-group--danger .cp-collapsible-section-footer,
.cp-user-group--primary .cp-collapsible-section-footer {
    background: transparent !important;
    border-top: 1px solid var(--cp-hairline) !important;
}

html[data-cp-theme="dark"] .cp-user-group--market .cp-user-group__toggle {
    background: linear-gradient(180deg, color-mix(in srgb, var(--cp-cat-trail) 88%, #fff) 0%, var(--cp-cat-trail) 100%) !important;
}

html[data-cp-theme="dark"] .cp-user-group--market,
html[data-cp-theme="dark"] .cp-user-group--danger,
html[data-cp-theme="dark"] .cp-user-group--primary {
    box-shadow: var(--cp-shadow-md) !important;
}

/* Category create/edit: retint market headers to Events / Trails / Spots */
.cp-create-form-card--event .cp-user-group--market,
.cp-event-form-sections.cp-create-form-card--event .cp-user-group--market {
    border-color: color-mix(in srgb, var(--cp-cat-event) 50%, var(--cp-border)) !important;
}

.cp-create-form-card--event .cp-user-group--market .cp-user-group__toggle,
.cp-event-form-sections.cp-create-form-card--event .cp-user-group--market .cp-user-group__toggle {
    background: var(--cp-cat-event) !important;
    background-image: none !important;
}

.cp-create-form-card--trail .cp-user-group--market,
.cp-trail-form-sections.cp-create-form-card--trail .cp-user-group--market {
    border-color: color-mix(in srgb, var(--cp-cat-trail) 50%, var(--cp-border)) !important;
}

.cp-create-form-card--trail .cp-user-group--market .cp-user-group__toggle,
.cp-trail-form-sections.cp-create-form-card--trail .cp-user-group--market .cp-user-group__toggle {
    background: var(--cp-cat-trail) !important;
    background-image: none !important;
}

.cp-create-form-card--spot .cp-user-group--market,
.cp-spot-form-sections.cp-create-form-card--spot .cp-user-group--market {
    border-color: color-mix(in srgb, var(--cp-cat-spot) 50%, var(--cp-border)) !important;
}

.cp-create-form-card--spot .cp-user-group--market .cp-user-group__toggle,
.cp-spot-form-sections.cp-create-form-card--spot .cp-user-group--market .cp-user-group__toggle {
    background: var(--cp-cat-spot) !important;
    background-image: none !important;
}

html[data-cp-theme="dark"] .cp-create-form-card--event .cp-user-group--market .cp-user-group__toggle,
html[data-cp-theme="dark"] .cp-event-form-sections .cp-user-group--market .cp-user-group__toggle {
    background: linear-gradient(180deg, color-mix(in srgb, var(--cp-cat-event) 85%, #fff) 0%, var(--cp-cat-event) 100%) !important;
}

html[data-cp-theme="dark"] .cp-create-form-card--trail .cp-user-group--market .cp-user-group__toggle,
html[data-cp-theme="dark"] .cp-trail-form-sections .cp-user-group--market .cp-user-group__toggle {
    background: linear-gradient(180deg, color-mix(in srgb, var(--cp-cat-trail) 85%, #fff) 0%, var(--cp-cat-trail) 100%) !important;
}

html[data-cp-theme="dark"] .cp-create-form-card--spot .cp-user-group--market .cp-user-group__toggle,
html[data-cp-theme="dark"] .cp-spot-form-sections .cp-user-group--market .cp-user-group__toggle {
    background: linear-gradient(180deg, color-mix(in srgb, var(--cp-cat-spot) 85%, #fff) 0%, var(--cp-cat-spot) 100%) !important;
}

/* -------------------------------------------------------------------------- */
/* Legacy create-form-card + QL photo card                                      */
/* -------------------------------------------------------------------------- */
.cp-create-form-card,
.cp-ql-photo-card.card,
.card.cp-ql-photo-card {
    background: var(--cp-raised) !important;
    color: var(--cp-ink);
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow: var(--cp-shadow-md) !important;
}

.cp-create-form-card .card-body,
.cp-ql-photo-card .card-body {
    background: transparent !important;
    color: var(--cp-ink);
}

.cp-create-form-card .card-footer,
.cp-ql-photo-card .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--cp-hairline) !important;
}

.cp-create-form-card .card-header {
    box-shadow: var(--cp-elev-lip);
    border-bottom: none !important;
}

/* Lip only on real cards — NOT on .cp-*-form-sections wrappers that reuse
   the --event/--trail/--spot modifier (that painted a stripe above Photos). */
.cp-create-form-card.cp-create-form-card--event {
    box-shadow: var(--cp-shadow-md), inset 0 3px 0 var(--cp-cat-event) !important;
    border-color: color-mix(in srgb, var(--cp-cat-event) 35%, var(--cp-border)) !important;
}

.cp-create-form-card.cp-create-form-card--trail {
    box-shadow: var(--cp-shadow-md), inset 0 3px 0 var(--cp-cat-trail) !important;
    border-color: color-mix(in srgb, var(--cp-cat-trail) 35%, var(--cp-border)) !important;
}

.cp-create-form-card.cp-create-form-card--spot {
    box-shadow: var(--cp-shadow-md), inset 0 3px 0 var(--cp-cat-spot) !important;
    border-color: color-mix(in srgb, var(--cp-cat-spot) 35%, var(--cp-border)) !important;
}

/* Section wrappers are layout-only — no frame/lip of their own */
.cp-event-form-sections.cp-create-form-card--event,
.cp-trail-form-sections.cp-create-form-card--trail,
.cp-spot-form-sections.cp-create-form-card--spot {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.cp-create-form-card--event .card-header,
.cp-edit-details-header.cp-create-form-card--event,
.cp-create-form-card.cp-create-form-card--event > .card-header {
    background: color-mix(in srgb, var(--cp-cat-event) 22%, var(--cp-raised)) !important;
    color: var(--cp-ink) !important;
}

.cp-create-form-card--trail .card-header,
.cp-edit-details-header.cp-create-form-card--trail,
.cp-create-form-card.cp-create-form-card--trail > .card-header {
    background: color-mix(in srgb, var(--cp-cat-trail) 22%, var(--cp-raised)) !important;
    color: var(--cp-ink) !important;
}

.cp-create-form-card--spot .card-header,
.cp-edit-details-header.cp-create-form-card--spot,
.cp-create-form-card.cp-create-form-card--spot > .card-header {
    background: color-mix(in srgb, var(--cp-cat-spot) 22%, var(--cp-raised)) !important;
    color: var(--cp-ink) !important;
}

/* -------------------------------------------------------------------------- */
/* Register / Edit Profile section cards                                        */
/* -------------------------------------------------------------------------- */
.cp-section-collapsible.card,
#register-form .cp-section-collapsible.card,
.cp-profile-edit-page-shell .cp-section-collapsible.card {
    background: var(--cp-raised) !important;
    color: var(--cp-ink);
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow: var(--cp-shadow-md) !important;
}

.cp-section-collapsible > .card-body,
.cp-section-collapsible > .collapse > .card-body,
#register-form .cp-section-collapsible .card-body,
.cp-profile-edit-page-shell .cp-section-collapsible .card-body {
    background: transparent !important;
    color: var(--cp-ink);
}

.cp-section-collapsible > .card-footer,
#register-form .cp-section-collapsible .card-footer,
.cp-profile-edit-page-shell .cp-section-collapsible .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--cp-hairline) !important;
}

.cp-section-collapsible > .card-header {
    box-shadow: var(--cp-elev-lip);
}

/* Keep Bootstrap header hues; ensure white title contrast on solid bands */
.cp-section-collapsible > .card-header.bg-info,
.cp-section-collapsible > .card-header.bg-success,
.cp-section-collapsible > .card-header.bg-primary,
.cp-section-collapsible > .card-header.bg-warning,
.cp-section-collapsible > .card-header.bg-danger,
.cp-section-collapsible > .card-header.bg-secondary {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* -------------------------------------------------------------------------- */
/* Shared form card primitive + page actions                                    */
/* -------------------------------------------------------------------------- */
.cp-form-card.card,
section.cp-form-card {
    background: var(--cp-raised) !important;
    color: var(--cp-ink);
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow: var(--cp-shadow-md) !important;
}

.cp-form-card-header h2,
.cp-form-card-header .h5 {
    color: var(--cp-ink);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cp-form-page,
.cp-form-max-1080 {
    color: var(--cp-ink);
}

.cp-form-actions--sticky {
    background: color-mix(in srgb, var(--cp-raised) 92%, transparent) !important;
    border-top: 1px solid var(--cp-border) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}

/* Ad create/edit shell sections */
.cp-ad-form-shell .cp-section-collapsible.card {
    background: var(--cp-raised) !important;
    border: 1px solid var(--cp-border) !important;
    box-shadow: var(--cp-shadow-md) !important;
}

.cp-ad-form-shell .cp-section-collapsible .card-body,
.cp-ad-form-shell .cp-section-collapsible .card-footer {
    background: transparent !important;
}

/* -------------------------------------------------------------------------- */
/* Controls — recessed wells on form surfaces                                   */
/* -------------------------------------------------------------------------- */
.cp-user-group--market .form-control,
.cp-user-group--danger .form-control,
.cp-user-group--primary .form-control,
.cp-section-collapsible .form-control,
.cp-form-card .form-control,
.cp-create-form-card .form-control,
.cp-ql-photo-card .form-control,
#register-form .form-control,
#edit-profile-form .form-control {
    background-color: var(--cp-void) !important;
    background-image: none !important;
    color: var(--cp-ink) !important;
    border-color: var(--cp-field-border-soft) !important;
    border-radius: var(--cp-radius-md, 0.75rem);
    box-shadow: var(--cp-elev-soft-tray);
}

.cp-user-group--market .form-control:focus,
.cp-user-group--danger .form-control:focus,
.cp-user-group--primary .form-control:focus,
.cp-section-collapsible .form-control:focus,
.cp-form-card .form-control:focus,
.cp-create-form-card .form-control:focus,
#register-form .form-control:focus,
#edit-profile-form .form-control:focus {
    border-color: var(--cp-success, #3ddc84) !important;
    box-shadow: var(--cp-elev-soft-tray-focus) !important;
}

.cp-user-group--market .form-control::placeholder,
.cp-section-collapsible .form-control::placeholder,
.cp-form-card .form-control::placeholder,
.cp-create-form-card .form-control::placeholder,
#register-form .form-control::placeholder,
#edit-profile-form .form-control::placeholder {
    color: var(--cp-ink-faint) !important;
    opacity: 1;
}

.cp-user-group--market .form-label,
.cp-user-group--market .cp-field-label,
.cp-section-collapsible .form-label,
.cp-form-card .form-label,
.cp-create-form-card .form-label {
    color: var(--cp-ink);
}

.cp-user-group--market .text-muted,
.cp-section-collapsible .text-muted,
.cp-form-card .text-muted,
.cp-create-form-card .text-muted,
.cp-user-group--market .form-text,
.cp-section-collapsible .form-text {
    color: var(--cp-ink-muted) !important;
}

/* Input-group addons match control well */
.cp-user-group--market .input-group-text,
.cp-section-collapsible .input-group-text,
.cp-form-card .input-group-text,
#register-form .input-group-text,
#edit-profile-form .input-group-text {
    background-color: color-mix(in srgb, var(--cp-sunken) 70%, var(--cp-raised)) !important;
    color: var(--cp-ink-muted) !important;
    border-color: var(--cp-border-strong) !important;
}