/**
 * 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;
    /* Corners come from the section's own clip — cp-card-chrome.css Rule 4. */
    margin: 0 !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;
    color: var(--cp-cat-event-font, #ffffff) !important;
    text-shadow: 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;
    color: var(--cp-cat-trail-font, #ffffff) !important;
    text-shadow: 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;
    color: var(--cp-cat-spot-font, #ffffff) !important;
    text-shadow: none !important;
}

.cp-create-form-card--event .cp-user-group--market .cp-user-group__toggle :is(.cp-user-group__title, .cp-user-group__chevron, .cp-user-group__count, i, span),
.cp-event-form-sections.cp-create-form-card--event .cp-user-group--market .cp-user-group__toggle :is(.cp-user-group__title, .cp-user-group__chevron, .cp-user-group__count, i, span),
.cp-create-form-card--trail .cp-user-group--market .cp-user-group__toggle :is(.cp-user-group__title, .cp-user-group__chevron, .cp-user-group__count, i, span),
.cp-trail-form-sections.cp-create-form-card--trail .cp-user-group--market .cp-user-group__toggle :is(.cp-user-group__title, .cp-user-group__chevron, .cp-user-group__count, i, span),
.cp-create-form-card--spot .cp-user-group--market .cp-user-group__toggle :is(.cp-user-group__title, .cp-user-group__chevron, .cp-user-group__count, i, span),
.cp-spot-form-sections.cp-create-form-card--spot .cp-user-group--market .cp-user-group__toggle :is(.cp-user-group__title, .cp-user-group__chevron, .cp-user-group__count, i, span) {
    color: inherit !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;
    color: var(--cp-cat-event-font, #ffffff) !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;
    color: var(--cp-cat-trail-font, #ffffff) !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;
    color: var(--cp-cat-spot-font, #ffffff) !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                                        */
/* -------------------------------------------------------------------------- */
/* The section edge does all the separating now that nothing is painted behind
   the stack, so it is a raised slab rather than a hairline: lit top edge, dark
   bottom edge, hard under-bevel and an ambient drop — the same physical
   language as .cp-btn, one size up. */
.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: 2px solid var(--cp-border-strong) !important;
    border-color:
        color-mix(in srgb, var(--cp-accent, #00d4ff) 50%, transparent)
        color-mix(in srgb, var(--cp-accent, #00d4ff) 30%, transparent)
        rgba(0, 0, 0, .55)
        color-mix(in srgb, var(--cp-accent, #00d4ff) 30%, transparent) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -2px 0 rgba(0, 0, 0, .4),
        0 4px 0 rgba(0, 0, 0, .5),
        0 14px 28px rgba(0, 0, 0, .5),
        0 0 0 1px rgba(0, 0, 0, .5),
        0 0 22px rgba(0, 212, 255, .1) !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;
}