/* ==========================================================================
   METAFLIGHT HUD - SUPPORT PAGE, prefix mf-sp-
   Page 10032 (SupportCandy shortcode [supportcandy]). The widget is a
   JS/AJAX app: #wpsc-container is the static shell, ticket list / ticket
   form / individual ticket bodies are injected after load. Its own admin
   panel only exposes a handful of flat colours (wpsc-ap-general), so this
   file does the actual redesign, CSS-only, against SupportCandy's own
   framework/style.css class names (read in full before writing this).
   Load order: mf-hud-tokens.css, mf-hud-chrome.css, then this file.

   DELIBERATE CHOICE - NO CLIP-PATH CHAMFERS ON CONTAINERS THAT HOST FORM
   FIELDS OR POPOVERS (tickets container, section container, modal, agent
   profile, filter bar). Per known pitfall #27: clip-path clips its own
   subtree, and this session has no live browser to confirm whether
   SupportCandy's select2 dropdowns and .wpsc-popover-menu are portaled to
   <body> or rendered inline. Clipping an inline-rendered dropdown would cut
   it off silently. Small leaf elements that never host a dropdown (buttons,
   tags, avatar chips, widget headers) ARE chamfered - no such risk there.
   The site's non-negotiable "no border-radius" rule is satisfied everywhere
   regardless; chamfering the big panels can be added later once Bertin
   confirms live in a browser that select2/popovers are appended to body.

   SCOPE: every rule is prefixed body.breakdance.mf-support. .wpsc-modal
   content is not necessarily a descendant of #wpsc-container in the DOM
   (SupportCandy renders modals as siblings), so it is targeted separately
   throughout rather than assumed nested.
   ========================================================================== */

body.breakdance.mf-support{
  background:transparent;color:var(--mf-text);
  font-family:'Rajdhani',sans-serif;-webkit-font-smoothing:antialiased;
}

/* Page frame: page 10032 has no Breakdance canvas of its own - it renders
   through the shared "Fallback: Everywhere" template (post 13, the same one
   Privacy Policy uses), one bde-section wrapping a bde-code-block around
   #wpsc-container. That section carries no explicit background in its own
   design (confirmed by reading the template's _breakdance_data), so the flat
   grey seen in Bertin's screenshots isn't coming from an element setting -
   it is exactly the gap mf-hud-legal.css already had to close for Privacy on
   this same shared section. Same fix, applied here too: force transparent so
   the starfield field shows through instead of a default fill. */
body.breakdance.mf-support .bde-section:not(.mf-bd-hd):not(.mf-bd-ft){
  position:relative;z-index:2;background:transparent!important;
}
body.breakdance.mf-support .bde-section:not(.mf-bd-hd):not(.mf-bd-ft) > .section-container{
  padding:8rem 2rem 5rem;max-width:1200px;margin:0 auto;width:100%;
}
body.breakdance.mf-support .bde-code-block{background:transparent!important}

/* --------------------------------------------------------------------------
   BASE TYPOGRAPHY - SupportCandy assumes a white card on a white page, so
   every text colour needs correcting for the dark field.
   -------------------------------------------------------------------------- */
body.breakdance.mf-support #wpsc-container,
body.breakdance.mf-support .wpsc-modal{
  font-family:'Rajdhani',sans-serif;color:var(--mf-text);
}
body.breakdance.mf-support #wpsc-container h1,
body.breakdance.mf-support #wpsc-container h2,
body.breakdance.mf-support #wpsc-container h3,
body.breakdance.mf-support .wpsc-modal h1,
body.breakdance.mf-support .wpsc-modal h2,
body.breakdance.mf-support .wpsc-modal h3{
  font-family:'Orbitron',sans-serif;color:var(--mf-text);font-weight:700;
}
body.breakdance.mf-support #wpsc-container label,
body.breakdance.mf-support .wpsc-humbargar-menu label,
body.breakdance.mf-support .wpsc-modal label{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-link{color:var(--mf-cyan)}
body.breakdance.mf-support .wpsc-link:hover{color:var(--mf-cyan-lit)}

/* --------------------------------------------------------------------------
   HEADER + TICKETS NAV + HAMBURGER MENU
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-header{
  background-color:rgba(255,255,255,.03);
  box-shadow:inset 0 -1px 0 var(--mf-hair);
}
body.breakdance.mf-support .wpsc-tickets-nav label,
body.breakdance.mf-support .wpsc-header-nav label,
body.breakdance.mf-support .wpsc-humbargar-title label{
  font-family:var(--mf-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mf-muted);
}
body.breakdance.mf-support .wpsc-tickets-nav.active label,
body.breakdance.mf-support .wpsc-tickets-nav:hover label,
body.breakdance.mf-support .wpsc-header-nav.active label,
body.breakdance.mf-support .wpsc-header-nav:hover label{color:var(--mf-cyan)}
body.breakdance.mf-support .wpsc-tickets-nav svg,
body.breakdance.mf-support .wpsc-header-nav svg,
body.breakdance.mf-support .wpsc-humbargar-title svg,
body.breakdance.mf-support .wpsc-humbargar svg{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-tickets-nav.active svg,
body.breakdance.mf-support .wpsc-tickets-nav:hover svg,
body.breakdance.mf-support .wpsc-header-nav.active svg,
body.breakdance.mf-support .wpsc-header-nav:hover svg{color:var(--mf-cyan)}
body.breakdance.mf-support .wpsc-humbargar,
body.breakdance.mf-support .wpsc-humbargar-title{color:var(--mf-text)}

body.breakdance.mf-support .wpsc-humbargar-menu{
  background-color:rgba(6,9,16,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:inset 1px 0 0 var(--mf-hair);
  border-radius:0;
}
body.breakdance.mf-support .wpsc-humbargar-close{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-humbargar-menu-item,
body.breakdance.mf-support .wpsc-setting-nav{
  background-color:transparent;color:var(--mf-muted);border-radius:0;
}
body.breakdance.mf-support .wpsc-humbargar-menu-item:hover,
body.breakdance.mf-support .wpsc-humbargar-menu-item.active,
body.breakdance.mf-support .wpsc-setting-nav:hover,
body.breakdance.mf-support .wpsc-setting-nav.active{
  color:var(--mf-cyan);background-color:rgba(0,212,255,.08);
}
body.breakdance.mf-support .wpsc-humbargar-overlay,
body.breakdance.mf-support .wpsc-modal .overlay{background-color:#000;opacity:.75}

/* --------------------------------------------------------------------------
   FILTER BAR / SEARCH
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-search .search-field{
  background-color:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  border-radius:0;
}
body.breakdance.mf-support .wpsc-search svg{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-search input{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-filter-item label{
  font-family:var(--mf-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mf-muted);
}
body.breakdance.mf-support .wpsc-filter-actions .action-devider{border-left-color:var(--mf-hair)}
body.breakdance.mf-support .wpsc-filter-actions span{color:var(--mf-cyan)}
body.breakdance.mf-support .wpsc-filter-actions span:hover{color:var(--mf-cyan-lit)}

/* --------------------------------------------------------------------------
   TICKETS CONTAINER + TABLE, SECTION CONTAINER (ticket form)
   Square panel by design (see note at top) - no clip-path.
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-tickets-container,
body.breakdance.mf-support .wpsc-section-container,
body.breakdance.mf-support .wpsc-agent-profile,
body.breakdance.mf-support .wpsc-ap-menu-container{
  background-color:var(--mf-scrim);
  background-image:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot));
  backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  border-radius:0;
}
body.breakdance.mf-support .wpsc-section-header{
  font-family:'Orbitron',sans-serif;font-weight:700;color:var(--mf-text);
}

body.breakdance.mf-support .wpsc-ticket-list-tbl,
body.breakdance.mf-support .wpsc-setting-tbl{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-ticket-list-tbl th,
body.breakdance.mf-support .wpsc-setting-tbl th{
  font-family:var(--mf-mono)!important;font-size:.6rem!important;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mf-muted)!important;
  background-color:transparent!important;
  box-shadow:inset 0 -1px 0 var(--mf-hair);
}
body.breakdance.mf-support .wpsc-ticket-list-tbl td,
body.breakdance.mf-support .wpsc-setting-tbl td{
  color:#C9D8E8;
  box-shadow:inset 0 -1px 0 var(--mf-hair);
}
body.breakdance.mf-support .wpsc-ticket-list-tbl tbody tr:nth-child(even),
body.breakdance.mf-support .wpsc-setting-tbl tr:nth-child(even),
body.breakdance.mf-support .wpsc-ticket-list-tbl tbody tr:nth-child(odd),
body.breakdance.mf-support .wpsc-setting-tbl tr:nth-child(odd){background-color:transparent!important}
body.breakdance.mf-support .wpsc-ticket-list-tbl tbody tr:hover,
body.breakdance.mf-support .wpsc-setting-tbl tbody tr:hover{background-color:rgba(0,212,255,.05)!important}
body.breakdance.mf-support .wpsc-no-ticket-found{color:var(--mf-muted)}

body.breakdance.mf-support .wpsc-ticket-pagination-header span,
body.breakdance.mf-support .wpsc-ticket-pagination-footer span{
  font-family:var(--mf-mono);font-size:.72rem;color:var(--mf-muted);
}
body.breakdance.mf-support .wpsc-ticket-pagination-header svg,
body.breakdance.mf-support .wpsc-ticket-pagination-footer svg{color:var(--mf-cyan)}

/* --------------------------------------------------------------------------
   POPOVER MENU (row actions, bulk actions)
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-popover-menu{
  background-color:#0B1524!important;box-shadow:inset 0 0 0 1px var(--mf-hair)!important;
  border-radius:0!important;
}
body.breakdance.mf-support .wpsc-popover-menu-item{
  background-color:transparent;color:var(--mf-muted);
}
body.breakdance.mf-support .wpsc-popover-menu-item:hover{
  color:var(--mf-cyan);background-color:rgba(0,212,255,.08);
}

/* --------------------------------------------------------------------------
   BUTTONS, TAGS - leaf elements, safe to chamfer
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-button{
  font-family:var(--mf-mono)!important;font-size:.62rem!important;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:0!important;border:none;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  background-color:var(--mf-cyan)!important;color:#04121C!important;
  transition:background-color .25s var(--mf-ease),box-shadow .25s var(--mf-ease);
}
body.breakdance.mf-support .wpsc-button:hover{
  background-color:var(--mf-cyan-lit)!important;box-shadow:0 0 20px rgba(0,212,255,.35);
}
body.breakdance.mf-support .wpsc-button.wpsc-outline,
body.breakdance.mf-support .wpsc-button.secondary{
  background-color:rgba(255,255,255,.06)!important;color:var(--mf-cyan-lit)!important;
  box-shadow:inset 0 0 0 1px rgba(140,232,255,.38);
}
body.breakdance.mf-support .wpsc-tag,
body.breakdance.mf-support .wpsc-ticket-tag{
  border-radius:0!important;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  font-family:var(--mf-mono);letter-spacing:.06em;
}
body.breakdance.mf-support .wpsc-toggle-btn{border-color:var(--mf-hair)}
body.breakdance.mf-support .wpsc-toggle-btn div{
  background-color:rgba(255,255,255,.03);color:var(--mf-muted);
}
body.breakdance.mf-support .wpsc-toggle-btn div.active{
  background-color:rgba(0,212,255,.14);color:var(--mf-cyan);
}

/* --------------------------------------------------------------------------
   FORM FIELDS - inputs, selects, textareas (native + select2), checkboxes,
   radios. Checkbox/radio tick geometry is left untouched (pitfall #14b):
   only border-color / background-color are overridden, never display,
   position or the border-width shorthand that draws the tick.
   -------------------------------------------------------------------------- */
body.breakdance.mf-support #wpsc-container input[type="text"],
body.breakdance.mf-support #wpsc-container input[type="password"],
body.breakdance.mf-support #wpsc-container input[type="number"],
body.breakdance.mf-support #wpsc-container select,
body.breakdance.mf-support #wpsc-container textarea,
body.breakdance.mf-support .wpsc-modal input[type="text"],
body.breakdance.mf-support .wpsc-modal input[type="password"],
body.breakdance.mf-support .wpsc-modal select,
body.breakdance.mf-support .wpsc-modal textarea{
  border-radius:0!important;
  background-color:rgba(255,255,255,.05)!important;
  color:var(--mf-text)!important;
  box-shadow:inset 0 0 0 1px var(--mf-hair)!important;
  font-family:'Rajdhani',sans-serif;font-weight:600;
}
body.breakdance.mf-support #wpsc-container input[type="text"]:focus,
body.breakdance.mf-support #wpsc-container input[type="password"]:focus,
body.breakdance.mf-support #wpsc-container select:focus,
body.breakdance.mf-support #wpsc-container textarea:focus,
body.breakdance.mf-support .wpsc-modal input[type="text"]:focus,
body.breakdance.mf-support .wpsc-modal input[type="password"]:focus,
body.breakdance.mf-support .wpsc-modal select:focus,
body.breakdance.mf-support .wpsc-modal textarea:focus{
  border-radius:0!important;
  box-shadow:inset 0 0 0 1px var(--mf-cyan),0 0 0 3px rgba(0,212,255,.16)!important;
}
body.breakdance.mf-support .wpsc-input-group label{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-input-group .required-char{color:#FF5C6C}
body.breakdance.mf-support .wpsc-tff .name{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-tff .extra-info{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-tff-label .required-indicator{color:#FF5C6C}

/* select2 - overrides its default library skin, not SupportCandy's own CSS */
body.breakdance.mf-support .select2-container .select2-selection--single{
  background-color:rgba(255,255,255,.05)!important;
  border:1px solid var(--mf-hair)!important;
  border-radius:0!important;
}
body.breakdance.mf-support .select2-selection__rendered{color:var(--mf-text)!important}
body.breakdance.mf-support .select2-selection__placeholder{color:var(--mf-muted)!important}
body.breakdance.mf-support .select2-selection__arrow b{
  border-color:var(--mf-muted) transparent transparent transparent!important;
}
body.breakdance.mf-support .select2-dropdown{
  background-color:#0B1524!important;border:1px solid var(--mf-hair)!important;border-radius:0!important;
}
body.breakdance.mf-support .select2-search__field{
  background-color:transparent!important;color:var(--mf-text)!important;
}
body.breakdance.mf-support .select2-results__option{color:var(--mf-text)!important}
body.breakdance.mf-support .select2-results__option--highlighted[aria-selected]{
  background-color:rgba(0,212,255,.16)!important;color:var(--mf-text)!important;
}
body.breakdance.mf-support .select2-container--default .select2-results__option[aria-selected=true]{
  background-color:rgba(0,212,255,.08)!important;
}

/* checkbox: recolour only, never touch geometry/display */
body.breakdance.mf-support #wpsc-container .checkbox-container label:before,
body.breakdance.mf-support .wpsc-modal .checkbox-container label:before{
  background-color:rgba(255,255,255,.05);
  box-shadow:none;
  border:1px solid var(--mf-hair);
}
body.breakdance.mf-support #wpsc-container .checkbox-container input:checked + label:before,
body.breakdance.mf-support .wpsc-modal .checkbox-container input:checked + label:before{
  border-color:var(--mf-cyan);
  background-color:rgba(0,212,255,.1);
}
body.breakdance.mf-support #wpsc-container .checkbox-container input:checked + label:after,
body.breakdance.mf-support .wpsc-modal .checkbox-container input:checked + label:after{
  border-color:var(--mf-cyan);
}
body.breakdance.mf-support #wpsc-container .checkbox-container div span,
body.breakdance.mf-support .wpsc-modal .checkbox-container div span,
body.breakdance.mf-support .wpsc-input-group .checkbox-group div span,
body.breakdance.mf-support .wpsc-input-group .radio-group div span{color:var(--mf-text)}

/* radio: recolour only */
body.breakdance.mf-support #wpsc-container .radio-container input + label:before,
body.breakdance.mf-support .wpsc-modal .radio-container input + label:before{
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--mf-hair);
}
body.breakdance.mf-support #wpsc-container .radio-container input + label:after,
body.breakdance.mf-support .wpsc-modal .radio-container input + label:after{
  background:var(--mf-cyan);
}

body.breakdance.mf-support .wpsc-error-msg{color:#FF5C6C}
body.breakdance.mf-support .wpsc-file-attachment-notice{color:var(--mf-muted)}

/* --------------------------------------------------------------------------
   MODAL
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-modal .modal{
  background-color:#0B1524;
  box-shadow:0 0 0 1px var(--mf-hair),0 20px 60px rgba(0,0,0,.55);
  border-radius:0;
}
body.breakdance.mf-support .wpsc-modal-header{
  font-family:'Orbitron',sans-serif;font-weight:700;color:var(--mf-text);
  box-shadow:inset 0 -1px 0 var(--mf-hair);
}
body.breakdance.mf-support .wpsc-modal-body{
  color:#C9D8E8;border-bottom-color:var(--mf-hair);
}
body.breakdance.mf-support .wpsc-modal-body .wpsc-tff .name{color:var(--mf-text)!important}
body.breakdance.mf-support .wpsc-modal-footer{box-shadow:inset 0 1px 0 var(--mf-hair)}

/* --------------------------------------------------------------------------
   AUTH SCREEN
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-auth-container h2{
  font-family:'Orbitron',sans-serif;font-weight:700;color:var(--mf-text);
}
body.breakdance.mf-support .wpsc_auth_header{color:var(--mf-text)}
body.breakdance.mf-support .wpsc_auth_link{color:var(--mf-cyan)}
body.breakdance.mf-support .wpsc-auth-container .auth-links a{color:var(--mf-cyan)}
body.breakdance.mf-support .wpsc-auth-container .auth-links a:hover{color:var(--mf-cyan-lit)}

/* --------------------------------------------------------------------------
   INDIVIDUAL TICKET - subject, editor, thread, attachments, sidebar widgets
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-it-subject-container h2{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-it-subject-container svg,
body.breakdance.mf-support .wpsc-it-subject-container span{color:var(--mf-muted)}

body.breakdance.mf-support .mce-tinymce,
body.breakdance.mf-support #wpsc-it-bcc,
body.breakdance.mf-support #wpsc-it-cc{
  box-shadow:inset 0 0 0 1px var(--mf-hair)!important;border-radius:0!important;
}
body.breakdance.mf-support .wpsc_switch_editor,
body.breakdance.mf-support .wpsc-switch-editor{
  background-color:rgba(255,255,255,.04);color:var(--mf-muted);border-radius:0!important;
}
body.breakdance.mf-support .wpsc-switch-editor.active{
  background-color:rgba(0,212,255,.14);color:var(--mf-cyan);
}
body.breakdance.mf-support .wpsc_tinymce_editor_btns .inner-container{border-color:var(--mf-hair)}
body.breakdance.mf-support .wpsc-editor-actions span{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-editor-actions span:hover{color:var(--mf-cyan)}
/* TinyMCE's own iframe skin is not reachable from this stylesheet - the
   compose area itself stays the editor's default light surface. */

body.breakdance.mf-support .wpsc-thread{box-shadow:inset 0 -1px 0 var(--mf-hair);padding-bottom:20px}
body.breakdance.mf-support .wpsc-thread .thread-avatar svg{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-thread .user-info h2{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-thread .thread-type,
body.breakdance.mf-support .wpsc-thread .thread-time,
body.breakdance.mf-support .wpsc-thread-logs{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-thread .thread-text,
body.breakdance.mf-support .wpsc-thread p{color:#C9D8E8}
body.breakdance.mf-support .wpsc-thread .actions span{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-thread .actions span:hover{color:var(--mf-cyan)}

body.breakdance.mf-support .wpsc-attachment-header{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-attachment-name{color:var(--mf-cyan)}
body.breakdance.mf-support .wpsc-attachment-name:hover{color:var(--mf-cyan-lit)}
body.breakdance.mf-support .wpsc-editor-attachment{border-radius:0!important}

body.breakdance.mf-support .wpsc-it-widget{
  background-color:var(--mf-scrim);
  background-image:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot));
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  border-radius:0;
}
body.breakdance.mf-support .wpsc-widget-header{box-shadow:inset 0 -1px 0 var(--mf-hair)}
body.breakdance.mf-support .wpsc-widget-header h2{
  font-family:var(--mf-mono);font-size:.68rem!important;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mf-cyan);
}
body.breakdance.mf-support .wpsc-widget-header svg,
body.breakdance.mf-support .wpsc-widget-header span{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-widget-body{color:#C9D8E8}
body.breakdance.mf-support .wpsc-widget-body .info-label{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-widget-body .user-list-item .ul-label{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-thread-info .info-list-item .info-label{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-thread-info .info-list-item .info-val{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-ticket-thread-expander{color:var(--mf-cyan)}

body.breakdance.mf-support .wpsc-it-mob-widget-trigger-btn{
  background-color:rgba(255,255,255,.04)!important;color:var(--mf-text);
  box-shadow:inset 0 0 0 1px var(--mf-hair)!important;border-radius:0;
}
body.breakdance.mf-support .wpsc-it-mob-widget-trigger-btn h2{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-it-mob-widget-trigger-btn svg{color:var(--mf-cyan)}

/* --------------------------------------------------------------------------
   AGENT PROFILE (menu nav)
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-ap-nav{
  background-color:transparent;color:var(--mf-muted);border-radius:0;
}
body.breakdance.mf-support .wpsc-ap-nav.active,
body.breakdance.mf-support .wpsc-ap-nav:hover{
  color:var(--mf-cyan);background-color:rgba(0,212,255,.08);
}
body.breakdance.mf-support .wpsc-ap-tab-container button{
  background-color:rgba(255,255,255,.04);color:var(--mf-muted);border-radius:0!important;
}
body.breakdance.mf-support .wpsc-ap-tab-container button.active,
body.breakdance.mf-support .wpsc-ap-tab-container button:hover{
  background-color:var(--mf-cyan)!important;color:#04121C!important;
}
body.breakdance.mf-support .wpsc-up-container{
  background-color:rgba(255,255,255,.04);border-radius:0;
}
body.breakdance.mf-support .wpsc-up-name{color:var(--mf-text)}
body.breakdance.mf-support .wpsc-up-email{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-up-section .wpsc-profile-tab{color:var(--mf-muted)}
body.breakdance.mf-support .wpsc-up-section .wpsc-profile-tab:hover,
body.breakdance.mf-support .wpsc-up-tab > .active{color:var(--mf-cyan)}

/* --------------------------------------------------------------------------
   DASHBOARD WIDGETS (agent-facing summary cards, if shown on this shortcode)
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-dash-widget{
  background-color:var(--mf-scrim);border:1px solid var(--mf-hair);
  border-radius:0;box-shadow:none;color:var(--mf-text);
}
body.breakdance.mf-support .wpsc-dash-widget-header{border-bottom-color:var(--mf-hair)}
body.breakdance.mf-support .wpsc-dash-widget svg{color:rgba(157,178,201,.35)}

/* --------------------------------------------------------------------------
   SCROLLBARS - thin instrument style, matching the rest of the site
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .wpsc-widget-body::-webkit-scrollbar,
body.breakdance.mf-support .wpsc-widget-scroller::-webkit-scrollbar{width:4px}
body.breakdance.mf-support .wpsc-widget-body::-webkit-scrollbar-track,
body.breakdance.mf-support .wpsc-widget-scroller::-webkit-scrollbar-track{background:transparent}
body.breakdance.mf-support .wpsc-widget-body::-webkit-scrollbar-thumb,
body.breakdance.mf-support .wpsc-widget-scroller::-webkit-scrollbar-thumb{
  background-color:rgba(0,212,255,.4);border-radius:0;
}

/* ===== MOBILE, KEEP LAST IN THIS FILE =====
   SupportCandy ships no responsive behaviour at all for the individual-
   ticket layout (confirmed absent from its own style.css): body + sidebar
   are two fixed-width flex children that overflow on a phone. This stacks
   them. The existing-but-unstyled .wpsc-it-mob-widget-trigger-btn is styled
   above; no display:none is added here so it cannot fight whatever JS
   toggle the plugin already drives on that button. */
@media (max-width:1023px){
body.breakdance.mf-support .wpsc-it-container{flex-direction:column}
body.breakdance.mf-support .wpsc-it-sidebar-widget-container{
  min-width:0;max-width:100%;margin-left:0;margin-top:20px;
}
body.breakdance.mf-support .wpsc-tickets-container,
body.breakdance.mf-support .wpsc-section-container,
body.breakdance.mf-support .wpsc-agent-profile{margin:0 8px 15px;width:calc(100% - 16px)}
body.breakdance.mf-support .wpsc-it-container,
body.breakdance.mf-support .wpsc-filter,
body.breakdance.mf-support .wpsc-auth-container{margin:0 8px}
body.breakdance.mf-support .wpsc-agent-profile{flex-direction:column}
body.breakdance.mf-support .wpsc-ap-menu-container{margin-right:0;margin-bottom:15px;width:100%}
body.breakdance.mf-support .wpsc-search .search-field{width:100%}
body.breakdance.mf-support .bde-section:not(.mf-bd-hd):not(.mf-bd-ft) > .section-container{
  padding:6rem 1rem 3rem;
}
}

/* --------------------------------------------------------------------------
   OVERRIDE OF THE PLUGIN'S OWN INLINE <style> BLOCK (wpsc-ap-general /
   wpsc-acb-appearance-general admin colours, printed inline near the
   shortcode output, AFTER this stylesheet in the DOM, several rules
   !important). Confirmed by reading the live page source. This block wins
   on !important+specificity where matched, loses where our own earlier
   rules lacked !important - both are patched here.
   .wpsc-shortcode-container is the actual outer shell (#1e1e25!important)
   that was never targeted before: it is the flat grey Bertin kept seeing.
   -------------------------------------------------------------------------- */
body.breakdance.mf-support #wpsc-container .wpsc-shortcode-container{
  position:relative;z-index:2;
  background-color:var(--mf-scrim)!important;
  background-image:linear-gradient(180deg,var(--mf-veil-top),var(--mf-veil-bot))!important;
  backdrop-filter:var(--mf-blur);-webkit-backdrop-filter:var(--mf-blur);
  border:none!important;
  box-shadow:inset 0 0 0 1px var(--mf-hair);
  color:var(--mf-text)!important;
}
body.breakdance.mf-support .wpsc-header{
  background-color:rgba(255,255,255,.03)!important;
}
body.breakdance.mf-support .wpsc-humbargar-menu{
  background-color:rgba(6,9,16,.97)!important;
}
body.breakdance.mf-support #wpsc-container input[type="text"],
body.breakdance.mf-support #wpsc-container input[type="password"],
body.breakdance.mf-support #wpsc-container input[type="number"],
body.breakdance.mf-support #wpsc-container select,
body.breakdance.mf-support #wpsc-container textarea,
body.breakdance.mf-support .wpsc-modal input[type="text"],
body.breakdance.mf-support .wpsc-modal input[type="password"],
body.breakdance.mf-support .wpsc-modal select,
body.breakdance.mf-support .wpsc-modal textarea{
  border:none!important;
}
body.breakdance.mf-support #wpsc-container .checkbox-container label:before,
body.breakdance.mf-support .wpsc-modal .checkbox-container label:before,
body.breakdance.mf-support #wpsc-container .radio-container input + label:before,
body.breakdance.mf-support .wpsc-modal .radio-container input + label:before{
  border:1px solid var(--mf-hair)!important;
}
body.breakdance.mf-support .wpsc-widget-header{background-color:rgba(255,255,255,.03)!important}
body.breakdance.mf-support .wpsc-widget-body{background-color:transparent!important;color:#C9D8E8!important}
body.breakdance.mf-support .wpsc-modal-header,
body.breakdance.mf-support .wpsc-modal-body,
body.breakdance.mf-support .wpsc-modal-footer{background-color:#0B1524!important}
body.breakdance.mf-support .wpsc-modal-body{color:#C9D8E8!important}


/* --------------------------------------------------------------------------
   TINYMCE (rich text editor) - the description/message field is NOT a plain
   textarea for logged-in users/agents (rich_editing on by default): SupportCandy
   swaps it for real TinyMCE (class-wpsc-text-editor.php, tinymce.init()),
   which renders an <iframe>. CSS from this stylesheet cannot reach INTO that
   iframe's own document (no same-document selector crosses a frame boundary),
   so the writing surface itself stays TinyMCE's default light skin - that is
   a hard CSS-only limitation, not an oversight. What IS reachable is the
   toolbar/statusbar chrome, which lives in the main document: styled here so
   the editor reads as one HUD-dark block instead of a stray grey rectangle.
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .mce-tinymce{
  box-shadow:inset 0 0 0 1px var(--mf-hair)!important;
  background-color:rgba(255,255,255,.03)!important;
}
body.breakdance.mf-support .mce-toolbar-grp,
body.breakdance.mf-support .mce-statusbar{
  background-color:rgba(255,255,255,.03)!important;
  border-color:var(--mf-hair)!important;
}
body.breakdance.mf-support .mce-btn button,
body.breakdance.mf-support .mce-ico,
body.breakdance.mf-support .mce-path-item,
body.breakdance.mf-support .mce-txt{
  color:var(--mf-text)!important;
}
body.breakdance.mf-support .mce-btn.mce-active button,
body.breakdance.mf-support .mce-btn:hover button{
  background-color:rgba(0,212,255,.12)!important;
}


/* ==========================================================================
   PAGE INTRO (added 2026-08-24)
   Lives in post_content as native Gutenberg blocks, above [supportcandy], so
   the copy is edited in the block editor and this file never has to be
   touched for a wording change. It renders inside the shared
   "Fallback: Everywhere" section, before #wpsc-container, so nothing here can
   reach a SupportCandy class: every selector below is a descendant of
   .mf-sp-intro or .mf-sp-facts, both of which exist only in that block.

   The production version carried flag emoji. They are dropped on purpose:
   emoji are drawn by the operating system, so they land as flat Apple or
   Microsoft artwork in the middle of a monospace HUD and they are the one
   kind of imagery this design system cannot control. EN / FR as mono tags
   say exactly the same thing and stay on-system.
   ========================================================================== */
body.breakdance.mf-support .mf-sp-intro{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:780px;margin:0 auto 3.2rem;text-align:center;
}
/* wp:group serialises an extra .wp-block-group__inner-container between the
   group and its blocks, so the flex context has to be restated on it or the
   width-constrained paragraphs sit left inside a centred box. */
body.breakdance.mf-support .mf-sp-intro > .wp-block-group__inner-container{
  display:flex;flex-direction:column;align-items:center;width:100%;
}
body.breakdance.mf-support .mf-sp-intro-h{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.06;letter-spacing:.02em;
  text-transform:uppercase;color:var(--mf-text);margin:0 0 1.1rem;
}
body.breakdance.mf-support .mf-sp-intro-p{
  font-family:'Rajdhani',sans-serif;font-size:1.08rem;line-height:1.68;
  color:var(--mf-muted);margin:0 0 .7rem;max-width:62ch;
}
/* The French line is a reassurance, not a second paragraph of equal weight. */
body.breakdance.mf-support .mf-sp-intro-fr{
  font-family:var(--mf-mono);font-size:.72rem;letter-spacing:.12em;
  color:var(--mf-cyan-lit);opacity:.85;margin:.3rem 0 0;
}

/* --------------------------------------------------------------------------
   FACT STRIP
   Three things a visitor needs before writing anything: which languages get
   answered, when, and where to look first. The documentation link sits here
   rather than further down because the cheapest support ticket is the one
   that never gets opened.
   -------------------------------------------------------------------------- */
body.breakdance.mf-support .mf-sp-facts{
  display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:stretch;justify-content:center;
  gap:0;width:100%;margin:2.2rem 0 0;
  box-shadow:inset 0 1px 0 var(--mf-hair),inset 0 -1px 0 var(--mf-hair);
}
body.breakdance.mf-support .mf-sp-fact{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  flex:1 1 190px;min-width:0;padding:1.15rem 1rem;
  box-shadow:inset 1px 0 0 var(--mf-hair);
}
body.breakdance.mf-support .mf-sp-fact:first-child{box-shadow:none}
body.breakdance.mf-support .mf-sp-fact-k{
  font-family:var(--mf-mono);font-size:.55rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mf-muted);
  margin:0 0 .45rem;
}
body.breakdance.mf-support .mf-sp-fact-v{
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.98rem;
  line-height:1.35;color:var(--mf-text);
}
body.breakdance.mf-support a.mf-sp-fact-a{
  font-family:var(--mf-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mf-cyan);text-decoration:none;
  box-shadow:inset 0 -1px 0 rgba(0,212,255,.4);
  transition:color .28s var(--mf-ease),box-shadow .28s var(--mf-ease);
}
body.breakdance.mf-support a.mf-sp-fact-a:hover{
  color:var(--mf-cyan-lit);box-shadow:inset 0 -1px 0 var(--mf-cyan-lit);
}
body.breakdance.mf-support a.mf-sp-fact-a:focus-visible{
  outline:2px solid var(--mf-cyan-lit);outline-offset:3px;
}

@media(max-width:639px){
  /* Stacked, so the vertical rules become horizontal ones. */
  body.breakdance.mf-support .mf-sp-facts{flex-direction:column}
  body.breakdance.mf-support .mf-sp-fact{
    flex:1 1 auto;padding:1rem .6rem;box-shadow:inset 0 1px 0 var(--mf-hair);
  }
  body.breakdance.mf-support .mf-sp-fact:first-child{box-shadow:none}
  body.breakdance.mf-support .mf-sp-intro{margin-bottom:2.2rem}
}