@charset "UTF-8";

/* ======================================================================
   PARLEE CONSEILLER — HESK HELPDESK THEME  v2
   Full design rewrite. Priority selector uses native <select>.
   Deploy: replace hesk/theme/hesk-parlee/customer/css/app.css + app.min.css
   All JS, fonts, img, util/ PHP → copy from hesk3 theme.
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Barlow+Condensed:wght@400;600;700&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --bg:      #030507;
  --bg-2:    #070c14;
  --bg-3:    #0d1520;
  --bg-4:    #111c2b;
  --primary: #066aab;
  --bright:  #0891d9;
  --gold:    #c9a96a;
  --gold-b:  #e8c97a;
  --text:    #d8dde8;
  --dim:     #8a92a6;
  --muted:   #4a5568;
  --border:  rgba(6,106,171,0.2);
  --border-b:rgba(6,106,171,0.45);
  --glow:    rgba(6,106,171,0.3);
  --shadow:  0 8px 32px rgba(0,0,0,0.6);
  --r:       4px;
  --rl:      8px;
  --ease:    250ms ease;
  --f-brand: 'Cinzel', Georgia, serif;
  --f-head:  'Barlow Condensed', Arial, sans-serif;
  --f-ui:    'Jost', system-ui, Arial, sans-serif;
}

/* ── RESET ───────────────────────────────────────────────────────────── */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,
caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,
figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,
img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,
section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,
time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body,html{height:100%}
body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote::before,blockquote::after,q::before,q::after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
*,*::before,*::after{box-sizing:border-box}

/* ── SVG ICON DIMENSIONS (same as hesk3, Parlee fills) ──────────────── */
.icon-01-normal-knowledge-b{width:1.2em;height:1em;fill:none}
.icon-01-normal-team,.icon-01-normal-tickets,.icon-calendar,.icon-categories,
.icon-close-mobile,.icon-knowledge,.icon-menu,.icon-menu-mobile,.icon-modules,
.icon-no-photo,.icon-tickets,.icon-tools{fill:var(--dim)}
.icon-actions,.icon-add,.icon-dismiss,.icon-edit,.icon-filters,.icon-reply,
.icon-tick{fill:var(--bright)}
.icon-anonymize,.icon-attach,.icon-close,.icon-cross,.icon-delete,
.icon-edit-ticket,.icon-export,.icon-eye-close,.icon-eye-open,.icon-lock,
.icon-mail,.icon-mail-small,.icon-note,.icon-notification{fill:var(--muted)}
.icon-document,.icon-folder,.icon-info,.icon-inquiries,.icon-label,
.icon-log-out,.icon-search,.icon-settings,.icon-submit-ticket,
.icon-thumb-down,.icon-thumb-up{fill:var(--dim)}
.icon-assign,.icon-assign-no,.icon-assign-plus,.icon-back,.icon-down,
.icon-merge,.icon-move-to{fill:var(--dim)}
.icon-star-filled{fill:var(--gold)}
.icon-star-stroke,.icon-smile-good,.icon-smile-bad,.icon-smile-neutral{fill:var(--muted)}
.icon-smile-good{fill:#38bc7d}.icon-smile-bad{fill:#e64342}.icon-smile-neutral{fill:#eeb707}
.icon-print{fill:var(--dim)}
.icon-chevron-down,.icon-chevron-left,.icon-chevron-right,.icon-warning{fill:initial}
.icon-label-critical{fill:#e02020}.icon-label-high{fill:#ff9a19}
.icon-label-medium{fill:var(--bright)}.icon-label-low{fill:#38bc7d}
.icon-01-normal-knowledge-b{width:1.2em;height:1em}
.icon-01-normal-team{width:1.41em;height:1em}
.icon-01-normal-tickets{width:.82em;height:1em}
.icon-actions{width:1.23em;height:1em}.icon-add{width:1em;height:1em}
.icon-back{width:3.33em;height:1em}.icon-chevron-down{width:1.33em;height:1em}
.icon-chevron-left,.icon-chevron-right{width:1em;height:1em}
.icon-star-filled,.icon-star-stroke{width:1.06em;height:1em}
.icon-tickets,.icon-knowledge,.icon-submit-ticket{width:.82em;height:1em}

/* ── BASE ────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{
  font-family:var(--f-ui);font-size:14px;line-height:1.6;letter-spacing:.01em;
  color:var(--text);background:var(--bg-2);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{font-family:var(--f-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text);line-height:1.2}
h1{font-size:clamp(1.6rem,3vw,2.4rem)}h2{font-size:clamp(1.3rem,2vw,1.8rem)}h3{font-size:1.15rem}
h4,h5,h6{font-family:var(--f-ui);font-weight:600;color:var(--text)}
p{margin-bottom:.75rem}
strong,b{font-weight:600}
a{color:var(--bright);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--gold);text-decoration:none}
.footer a{color:var(--dim)!important;text-decoration:underline!important}
.footer a:hover{text-decoration:none!important;color:var(--gold)!important}

/* ── SCROLLBAR ───────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(6,106,171,.35);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
.wrapper{
  display:-ms-flexbox;display:flex;
  -ms-flex:1 0 auto;flex:1 0 auto;
  width:100%;
  background:var(--bg-2);color:var(--text);
  font-family:var(--f-ui);font-size:14px;line-height:1.6;
}
.cust-help .wrapper{margin:0!important;background:var(--bg-2)}
.main{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%}
.main__content{-ms-flex-positive:1;flex-grow:1;background:var(--bg-2);padding:2rem 0}
.main__content.notice-flash{border-top:2px solid var(--primary)}
.cust-help .contr{max-width:1070px;width:100%;margin:0 auto;padding:0 1.5rem}
.clearfix{overflow:auto}

/* ── HEADER ──────────────────────────────────────────────────────────── */
.cust-help .header,.header{
  background:linear-gradient(180deg,rgba(3,5,7,.97),rgba(7,12,20,.93))!important;
  border-bottom:1px solid var(--border)!important;
  box-shadow:0 4px 28px rgba(0,0,0,.55)!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.cust-help .header__inner{
  display:-ms-flexbox;display:flex;
  -ms-flex-pack:justify;justify-content:space-between;
  -ms-flex-align:center;align-items:center;
  padding:13px 0;
}
.cust-help .header__logo{
  font-family:var(--f-brand)!important;font-size:1rem!important;font-weight:700!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--text)!important;
  display:-ms-inline-flexbox;display:inline-flex;align-items:center;gap:.6rem;
}
.cust-help .header__logo:hover{color:var(--gold)!important}
.cust-help .header__logo img{height:28px;width:auto}

/* header lang dropdown — native select */
.header .dropdown-select,.cust-help .header .dropdown-select{
  background:transparent!important;border:1px solid var(--border)!important;border-radius:var(--r)!important;
}
.cust-help .header .dropdown-select .label{
  color:var(--dim)!important;letter-spacing:.08em!important;padding:6px 12px!important;
}
.cust-help .header .dropdown-select .label .icon{fill:currentColor!important}
.header .dropdown-select select,.cust-help .header .dropdown-select select{
  background:rgba(13,21,32,.9)!important;border:1px solid var(--border)!important;
  color:var(--dim)!important;border-radius:var(--r)!important;
  font-family:var(--f-ui)!important;font-size:.72rem!important;padding:4px 8px!important;
}

/* ── BREADCRUMBS ─────────────────────────────────────────────────────── */
.breadcrumbs{background:var(--bg-3);border-bottom:1px solid var(--border)}
.breadcrumbs__inner{
  display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;
  -ms-flex-wrap:wrap;flex-wrap:wrap;gap:.4rem;padding:.6rem 0;
  font-family:var(--f-ui);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.breadcrumbs__inner a{color:var(--dim)}
.breadcrumbs__inner a:hover{color:var(--bright)}
.breadcrumbs__inner .last,.breadcrumbs__inner span:last-of-type{color:var(--gold)}

/* ── HOMEPAGE NAV LINKS ──────────────────────────────────────────────── */
.nav{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:1.5rem 0}
.navlink{
  display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;
  width:100%;max-width:344px;margin:12px;padding:1.5rem;
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--rl);
  color:var(--text);letter-spacing:.01em;
  transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease);
  position:relative;overflow:hidden;
}
.navlink::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform var(--ease);
}
.navlink:hover{border-color:var(--border-b);box-shadow:0 0 28px var(--glow);transform:translateY(-2px);color:var(--text)}
.navlink:hover::after{transform:scaleX(1)}
.navlink .icon-in-circle{margin-right:12px;flex-shrink:0}
.navlink:hover>.icon-in-circle{background:var(--primary)}
.navlink:hover>.icon-in-circle .icon{fill:#fff}
.navlink .navlink__title{font-family:var(--f-head);font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text)}
.navlink .navlink__descr{font-size:.8rem;color:var(--dim);margin-top:.3rem}
.navlink-condensed{margin:8px;padding:10px}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn{
  display:-ms-inline-flexbox;display:inline-flex;
  -ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:.4rem;
  padding:.6rem 1.4rem;font-family:var(--f-ui);font-size:.7rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;
  transition:background var(--ease),color var(--ease),border-color var(--ease),box-shadow var(--ease);
  text-decoration:none;white-space:nowrap;line-height:1;
  color:var(--text);background:var(--bg-3);
}
.btn--blue,.btn-banner{background:var(--primary);border-color:var(--primary);color:#fff}
.btn--blue:hover,.btn-banner:hover{background:var(--bright);border-color:var(--bright);box-shadow:0 0 18px var(--glow);color:#fff}
.btn--blue-border{background:transparent;border-color:var(--border-b);color:var(--bright)}
.btn--blue-border:hover{background:rgba(6,106,171,.1)}
.btn-transparent,.btn-empty{background:transparent;border-color:var(--border);color:var(--dim)}
.btn-transparent:hover,.btn-empty:hover{color:var(--gold);border-color:rgba(201,169,106,.35)}
.btn-border{background:transparent;border-color:var(--border);color:var(--dim)}
.btn-border:hover{border-color:var(--primary);color:var(--bright)}
.btn.cancel{background:transparent;border-color:var(--border);color:var(--muted)}
.btn.cancel:hover{color:#e64342;border-color:rgba(230,67,66,.4)}
.btn-full{width:100%}
.btn-action{
  display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;
  -ms-flex-pack:center;justify-content:center;width:32px;height:32px;padding:0;
  background:transparent;border:1px solid var(--border);border-radius:var(--r);
  color:var(--dim);cursor:pointer;transition:all var(--ease);
}
.btn-action:hover{border-color:var(--primary);color:var(--bright);background:rgba(6,106,171,.08)}
.cust-help .btn:hover .icon{fill:var(--text)}

/* ── ICON IN CIRCLE ──────────────────────────────────────────────────── */
.icon-in-circle{
  width:40px;height:40px;-ms-flex-negative:0;flex-shrink:0;
  display:-ms-inline-flexbox;display:inline-flex;
  -ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;
  background:rgba(6,106,171,.12);border:1px solid var(--border);border-radius:50%;
}
.icon-in-circle .icon{fill:var(--bright);font-size:20px}

/* ── FORMS ───────────────────────────────────────────────────────────── */
/* .label class = inline badge/indicator (hesk3 keeps this inline-flex) */
.label{
  display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;
  position:relative;font-family:var(--f-ui);font-size:.68rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
/* required asterisk (absolute so it doesn't shift layout) */
.form-group.required .label::after,.label.required::after,label.required::after{
  content:'*';position:absolute;right:-.55em;font-size:1.1em;font-weight:700;line-height:1.2;color:var(--gold);
}
/* HTML <label> elements inside form-groups stack above their inputs */
.form-group label,.form-group>label{
  display:block;margin-bottom:.35rem;font-family:var(--f-ui);font-size:.64rem;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
/* .form .label restores inline-flex in form context (matches hesk3 rule) */
.form .label{display:-ms-inline-flexbox;display:inline-flex}

.form{width:100%}
.form-group{position:relative;margin-bottom:1.25rem}

.form-control{
  display:block;width:100%;padding:.65rem 1rem;font-family:var(--f-ui);font-size:.875rem;
  color:var(--text);background:rgba(13,21,32,.85);border:1px solid var(--border);
  border-radius:var(--r);transition:border-color var(--ease),box-shadow var(--ease);
  outline:none;line-height:1.5;-webkit-appearance:none;-moz-appearance:none;appearance:none;
}
.form input.form-control,.form textarea.form-control{
  height:40px;width:100%;padding:4px 12px;font-size:14px;font-family:var(--f-ui);
  border-radius:var(--r);border:1px solid var(--border);background:rgba(13,21,32,.85);
  color:var(--text);outline:0;transition:all var(--ease);
}
.form textarea.form-control{height:200px;padding:.65rem 1rem}
.form input.form-control::placeholder,.form textarea.form-control::placeholder{color:var(--muted);opacity:1}
.form input.form-control:hover,.form textarea.form-control:hover{border-color:rgba(6,106,171,.4)}
.form input.form-control:focus,.form textarea.form-control:focus{
  color:var(--text)!important;border-color:var(--primary);
  box-shadow:0 0 0 3px var(--glow);outline:0;
}
.form-group.error input,.form-group.error .form-control{border-color:rgba(230,67,66,.55)}
.form-group.error input:focus{box-shadow:0 0 0 3px rgba(230,67,66,.18)}
.form-control__error{display:none;margin-top:.4rem;font-size:.7rem;color:#e64342;text-align:center;background:rgba(230,67,66,.05);padding:6px}
.form-group.error .form-control__error{display:block}
.invalid .form-control{border-color:rgba(230,67,66,.55)!important}

/* form submit ticket card */
.form-submit-ticket{
  margin-bottom:1.5rem;padding:1.75rem 2rem 3.5rem;
  background:var(--bg-3);border:1px solid var(--border);border-radius:var(--rl);
  box-shadow:var(--shadow);
}
.form-submit-ticket .form-groups{max-width:320px}
.form-submit-ticket .form-groups.centered{margin:auto}
.form-submit-ticket .form-group,.form-submit-ticket .param{max-width:570px;margin-bottom:32px}
.form-submit-ticket textarea.form-control{height:200px}

/* heading & tip */
.article__heading{margin:12px 0;font-size:20px;font-weight:700;line-height:1.4;letter-spacing:.1px;text-align:center;color:var(--text)}
.article__heading a{color:var(--bright)}
.article__heading a .icon-in-circle+span{margin-left:8px}
.article__heading--form{margin:0 0 2rem}
.article__heading+.article-heading-tip{margin-top:-1.5rem}
.article-heading-tip{
  display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;
  -ms-flex-pack:center;justify-content:center;margin:4px auto 2rem;
  text-align:center;font-size:.75rem;color:var(--muted);
}
.article-heading-tip .label{color:var(--gold)}

/* ── DROPDOWN / DROPDOWN-SELECT ──────────────────────────────────────── */
/*
 * app.js creates inside .dropdown-select:
 *   <div class="label"><span>Text</span><svg chevron/></div>  ← trigger
 *   <ul class="dropdown-list">…</ul>                         ← popup
 * Visual box goes on the WRAPPER; .label div is plain flex text.
 */
.dropdown,.dropdown-select,.with-label{
  display:-ms-inline-flexbox;display:inline-flex;
  -ms-flex-align:center;align-items:center;position:relative;cursor:pointer;
  background:rgba(13,21,32,.85);border:1px solid var(--border);border-radius:var(--r);
  transition:border-color var(--ease),background var(--ease);
}
.dropdown:hover,.dropdown-select:hover,.with-label:hover{border-color:var(--border-b)}
.dropdown.active,.dropdown-select.active,.with-label.active{border-color:var(--primary);background:rgba(6,106,171,.06)}

/* inner trigger div */
.dropdown .label,.dropdown-select .label,.with-label .label{
  display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;
  padding:6px 12px;color:var(--text);font-family:var(--f-ui);font-size:.85rem;
  font-weight:400;letter-spacing:.02em;text-transform:none;cursor:pointer;
  position:static;/* override base .label position:relative */
}
.dropdown label,.dropdown-select label,.with-label label{cursor:pointer;color:var(--dim);white-space:nowrap}

/* chevron */
.dropdown .icon-chevron-down,.dropdown-select .icon-chevron-down,.with-label .icon-chevron-down{
  fill:var(--dim)!important;margin-top:1px;width:8px;height:8px;
  margin-left:8px;flex-basis:8px;flex-shrink:0;transition:all 100ms ease;
}
.dropdown-select.active .icon-chevron-down,.dropdown.active .icon-chevron-down,.with-label.active .icon-chevron-down{
  -ms-transform:rotate(180deg);transform:rotate(180deg);
}

/* user-select on the text span */
.dropdown-select>span,.dropdown>span,.with-label>span{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}

/* native select hidden by JS */
.dropdown select,.dropdown-select select,.with-label select{display:none}

/* popup list — jQuery slideDown controls visibility */
.dropdown .dropdown-list,.dropdown-select .dropdown-list,.with-label .dropdown-list{
  display:none;position:absolute;top:100%;z-index:250;
  background:rgba(7,12,20,.98);border:1px solid var(--border);
  border-radius:0 0 var(--rl) var(--rl);
  list-style:none;margin:0;padding:0;box-shadow:var(--shadow);min-width:100%;
}
.dropdown-select.left .dropdown-list,.dropdown.left .dropdown-list{left:0}
.dropdown-select.right .dropdown-list,.dropdown.right .dropdown-list{right:0}
.dropdown-select.center .dropdown-list,.dropdown.center .dropdown-list{
  left:50%;-ms-transform:translateX(-50%);transform:translateX(-50%);
}
.dropdown .dropdown-list>li,.dropdown-select .dropdown-list>li,.with-label .dropdown-list>li{
  height:40px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;
  white-space:nowrap;padding:0 16px;color:var(--dim);cursor:pointer;
  transition:background var(--ease),color var(--ease);
}
.dropdown .dropdown-list>li:hover,.dropdown-select .dropdown-list>li:hover,.with-label .dropdown-list>li:hover{
  background:rgba(6,106,171,.18);color:var(--text)!important;
}
.dropdown .dropdown-list>li a,.dropdown-select .dropdown-list>li a,.with-label .dropdown-list>li a{
  width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:inherit;
}
.dropdown .dropdown-list>li svg,.dropdown-select .dropdown-list>li svg{fill:var(--muted);margin-right:8px;width:16px;height:16px}
.dropdown .dropdown-list>li:hover svg,.dropdown-select .dropdown-list>li:hover svg{fill:var(--text)}
.dropdown .dropdown-list .separator,.dropdown-select .dropdown-list .separator{height:1px;background:var(--border)}

/* ── PRIORITY: native <select> inside .param ─────────────────────────── */
/* The JS-converted custom dropdown sits at wrong position in this context.
   Show the native select instead — reliable, correct, styled to match.   */
.param .dropdown-select .label{display:none!important}
.param .dropdown-select .dropdown-list{display:none!important}
.param .dropdown-select select{
  display:inline-block!important;background:rgba(13,21,32,.85)!important;
  border:1px solid var(--border)!important;border-radius:var(--r)!important;
  color:var(--text)!important;font-family:var(--f-ui)!important;font-size:13px!important;
  padding:6px 24px 6px 10px!important;cursor:pointer!important;height:36px!important;
  min-width:120px!important;-webkit-appearance:auto!important;-moz-appearance:auto!important;appearance:auto!important;
}
.param .dropdown-select select:focus{border-color:var(--primary)!important;outline:none!important;box-shadow:0 0 0 2px var(--glow)!important}

/* ── PARAM (priority / calendar / attach sections) ───────────────────── */
.param{display:block}
.param .checkbox-custom{margin-top:16px}
.param .label{margin-right:8px}
.param .label.required{margin-right:16px}

/* ── SELECTIZE ───────────────────────────────────────────────────────── */
.selectize-dropdown,.selectize-input,.selectize-input input{
  color:var(--text);font-family:var(--f-ui);font-size:13px;line-height:1.5;
}
.selectize-input{
  background:rgba(13,21,32,.85)!important;border:1px solid var(--border)!important;
  border-radius:var(--r)!important;box-shadow:none!important;padding:8px 10px;
  width:100%;display:inline-block;position:relative;z-index:1;box-sizing:border-box;overflow:hidden;
}
.selectize-input.focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px var(--glow)!important}
.selectize-input.dropdown-active{border-radius:var(--r) var(--r) 0 0}
.selectize-input>*{vertical-align:baseline;display:-moz-inline-stack;display:inline-block;zoom:1}
.selectize-control.multi .selectize-input>div{
  cursor:pointer;margin:0 3px 3px 0;padding:2px 6px;
  background:rgba(6,106,171,.15);color:var(--text);border:1px solid var(--border);border-radius:var(--r);
}
.selectize-control.plugin-remove_button [data-value] .remove{
  z-index:1;position:absolute;top:0;right:0;bottom:0;width:17px;text-align:center;
  font-weight:700;font-size:12px;color:inherit;text-decoration:none;
  display:inline-block;padding:2px 0 0;border-left:1px solid var(--border);border-radius:0 2px 2px 0;box-sizing:border-box;
}
.selectize-dropdown{
  background:rgba(7,12,20,.98)!important;border:1px solid var(--border)!important;
  border-radius:0 0 var(--rl) var(--rl)!important;box-shadow:var(--shadow)!important;z-index:300;
}
.selectize-dropdown .option{color:var(--dim);padding:.5rem .75rem;cursor:pointer;transition:background var(--ease)}
.selectize-dropdown .option:hover,.selectize-dropdown .selected,.selectize-dropdown .active{background:rgba(6,106,171,.15)!important;color:var(--text)}
.selectize-dropdown-header{padding:5px 8px;border-bottom:1px solid var(--border);background:var(--bg-3);border-radius:var(--r) var(--r) 0 0}

/* ── NOTIFICATIONS / ALERTS ──────────────────────────────────────────── */
.notification{
  background:var(--bg-3);box-shadow:var(--shadow);padding:1rem 1.25rem;
  font-family:var(--f-ui);position:relative;display:block;margin-bottom:1.25rem;
  border-radius:var(--rl);border:1px solid;border-left-width:3px;font-size:.875rem;line-height:1.55;
}
.notification.red{background:rgba(230,67,66,.08);border-color:rgba(230,67,66,.3);border-left-color:#e64342;color:#f38b8b}
.notification.green{background:rgba(56,188,125,.08);border-color:rgba(56,188,125,.25);border-left-color:#38bc7d;color:#9fe4c3}
.notification.orange{background:rgba(238,183,7,.08);border-color:rgba(238,183,7,.22);border-left-color:#eeb707;color:#f3e3a7}
.notification.blue{background:rgba(6,106,171,.08);border-color:var(--border);border-left-color:var(--bright);color:var(--text)}
.notification.white{background:var(--bg-3);border-color:var(--border);color:var(--dim)}

/* ── ARTICLE / TICKET CARDS ──────────────────────────────────────────── */
.article{margin-top:44px;margin-bottom:30px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--rl)}
.article .block__head{
  padding:1rem 1.25rem;border-bottom:1px solid var(--border);
  background:var(--bg-3);color:var(--dim)!important;
}
.article__footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin:2rem 0 .5rem}
.article__footer .link{height:40px;font-size:13px;font-weight:600;text-align:center;color:var(--bright)}

/* ── PREVIEWS (KB listing) ───────────────────────────────────────────── */
.preview{
  display:-ms-flexbox;display:flex;width:100%;padding:1.5rem 1rem;
  border-bottom:1px solid var(--border);background:var(--bg-3);
  transition:background var(--ease);
}
.preview:hover{background:rgba(6,106,171,.06)}
.preview:hover .icon-in-circle .icon{fill:#fff}
.preview:hover .icon-in-circle{background:var(--primary)}
.preview .icon-in-circle{margin-top:-8px;margin-right:12px;margin-bottom:10px;flex-shrink:0}
.preview .preview__title{margin-bottom:10px;font-family:var(--f-head);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bright)}
.preview:hover .preview__title{color:var(--gold)}
.preview__text{max-width:678px;overflow-wrap:break-word;word-break:break-word;color:var(--dim);font-size:.85rem;line-height:1.6}
.preview__text p{margin-top:8px}

/* ── TICKETS ─────────────────────────────────────────────────────────── */
.ticket__body_block{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:1rem;overflow:hidden}
.block__head{
  display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;
  -ms-flex-pack:justify;justify-content:space-between;padding:.65rem 1rem;
  border-bottom:1px solid var(--border);background:var(--bg-3);
  font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}

/* ── TABS ────────────────────────────────────────────────────────────── */
.tabbed__head{margin:0;border-bottom:2px solid var(--border);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;background:var(--bg-3)}
.tabbed__head .tabbed__head_tabs{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}
.tabbed__head_tabs{list-style:none;padding:0;margin:0;display:flex}
.tabbed__head_tabs li a,.tabbed__head_tabs li button{
  display:block;padding:.75rem 1.25rem;font-family:var(--f-ui);font-size:.68rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;transition:color var(--ease),border-color var(--ease);
  background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;
}
.tabbed__head_tabs li.current a,.tabbed__head_tabs li.current button{color:var(--gold);border-bottom-color:var(--gold)}
.tabbed__head_tabs li a:hover,.tabbed__head_tabs li button:hover{color:var(--text);border-bottom-color:var(--primary)}
.tabbed__tabs_tab{display:none}.tabbed__tabs_tab.is-visible{display:block}
.accordion .accordion-title{cursor:pointer}
.accordion .accordion-body{display:none}
.accordion.visible .accordion-title svg{transform:rotate(180deg)}

/* ── TOPICS (KB) ─────────────────────────────────────────────────────── */
.topics{
  display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;
  padding:2rem 1.5rem 0;border-radius:var(--rl);background:var(--bg-3);border:1px solid var(--border);
}
.topics__block{width:50%;margin-bottom:1rem}
.topics__title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-family:var(--f-head);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bright)}
.topics__title .icon{font-size:18px;fill:var(--bright);margin-right:8px}
.topics__list{color:var(--bright);padding-left:46px}
.topics__list li{position:relative}
.topics__list li::before{content:'';position:absolute;left:-14px;top:.7em;display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor}
.topics__list li.text-bold::before{display:none}
.topics__list a{display:-ms-flexbox;display:flex;margin:16px 0;line-height:1.57;color:var(--dim)}
.topics__list a:hover{color:var(--text)}

/* ── KB SUGGESTIONS ──────────────────────────────────────────────────── */
.kb-suggestions{margin:0 auto;width:100%;display:none;margin-top:10px}
.kb-suggestions h6{padding:0 8px 8px;font-size:16px;font-weight:700;color:var(--text)}
.suggest-preview{display:-ms-flexbox;display:flex;width:100%;padding:8px;border-bottom:1px solid var(--border);background:var(--bg-3);overflow-wrap:break-word;word-break:break-word}
.suggest-preview:last-of-type{border-bottom:none}
a.suggest-preview{color:var(--text)}
a.suggest-preview:hover{background:rgba(6,106,171,.06)}
a.suggest-preview:hover .icon-in-circle .icon{fill:#fff}
.suggest-preview .icon-in-circle{margin-top:6px;margin-right:12px}
.suggest-preview .suggest-preview__title{margin-bottom:6px;font-size:100%;line-height:1.38;color:var(--bright)}

/* ── NOTIFICATIONS LIST ──────────────────────────────────────────────── */
.main__content.notifications .notifications__list{list-style:none;padding:0;margin:0}
.main__content.notifications .notifications__list li{
  padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.85rem;color:var(--text);transition:background var(--ease);
}
.main__content.notifications .notifications__list li:nth-child(odd){background:rgba(13,21,32,.3)}
.main__content.notifications .notifications__list li:hover{background:rgba(6,106,171,.06)}
.main__content.notifications .notifications__list li.new{border-left:3px solid var(--bright);background:rgba(6,106,171,.06)}
.main__content.notifications .notifications__list li h5{font-size:.9rem;font-weight:600;color:var(--text)}
.main__content.notifications .notifications__list li h5 a{color:var(--text)}
.main__content.notifications .notifications__list li time{color:var(--muted);font-size:.75rem}

/* ── RATE / STARS ────────────────────────────────────────────────────── */
.rate{display:-ms-inline-flexbox;display:inline-flex;margin-left:auto;font-size:12px;letter-spacing:.1px;align-items:center;gap:.2rem}
.rate .star-rate+span{font-size:12px;margin-left:8px}

/* ── DIVIDER ─────────────────────────────────────────────────────────── */
.divider{display:block;height:1px;margin:1.5rem 0;background:var(--border)}

/* ── CAPTCHA ─────────────────────────────────────────────────────────── */
.captcha-block{margin:24px auto;max-width:300px;text-align:center}
.captcha-block .label{margin-top:4px}
.captcha-block .form-captcha{
  position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:16px 0;
}
.captcha-block .form-captcha img{width:100%}
.btn-refresh{
  position:absolute;top:0;bottom:0;right:-44px;margin:auto;
  width:36px;height:36px;overflow:hidden;
  display:-ms-inline-flexbox!important;display:inline-flex!important;
  -ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;
}
.btn-refresh .icon,.btn-refresh svg{fill:var(--dim);width:18px!important;height:18px!important;font-size:16px}

/* ── MODAL ───────────────────────────────────────────────────────────── */
.modal,[aria-modal="true"]{
  background:var(--bg-2)!important;border:1px solid var(--border)!important;
  border-radius:var(--rl)!important;box-shadow:var(--shadow)!important;color:var(--text)!important;padding:2rem!important;
}
.jquery-modal.blocker{background:rgba(3,5,7,.82)!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important}

/* ── DROPZONE ────────────────────────────────────────────────────────── */
.dropzone{border:2px dashed var(--border);border-radius:var(--rl);background:rgba(13,21,32,.5);padding:2rem;text-align:center;color:var(--dim);transition:border-color var(--ease);cursor:pointer}
.dropzone:hover,.dropzone.dz-drag-hover{border-color:var(--primary);background:rgba(6,106,171,.06)}
.dropzone>.file-row:nth-child(even){background:rgba(13,21,32,.3)}

/* ── INPUT GROUP ─────────────────────────────────────────────────────── */
.input-group{position:relative}
.input-group-append--icon{position:absolute;right:17px;top:0;bottom:0;margin:auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:transparent;border:none;z-index:3;cursor:pointer}
.input-group-append--icon:hover .icon{fill:var(--primary)}
.input-group-append--icon .icon{fill:var(--muted);font-size:12px}

/* ── UTILS ───────────────────────────────────────────────────────────── */
.lightgrey{color:var(--dim)}
.cust-help .lightgrey{color:var(--dim)}
.cust-help .highlighted{background:rgba(6,106,171,.1);border-radius:var(--r)}
.cust-help .italic{font-style:italic}
.cust-help .ml-1{margin-left:.4rem}
.cust-help .h-3{height:3rem}
.cust-help .text-center{text-align:center}
.cust-help .text-bold{font-weight:700}
.content{margin:28px 0}
.select__title{margin:0 0 24px;font-size:20px;font-weight:700;text-align:center;color:var(--text)}
.error-message{display:none;padding:9px;color:#e64342;text-align:center;background:rgba(230,67,66,.05)}

/* ── TICKET VIEW ─────────────────────────────────────────────────────── */
.main__content.ticket{background:var(--bg-2)}
.main__content.ticket .icon-chevron-down{fill:var(--dim)}
@media screen and (max-width:768px){
  .main__content.ticket .ticket__body{padding:1rem}
  .main__content.ticket .block--submit .btn{width:100%}
  .main__content.ticket .ticket__params{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-flow:column-reverse;flex-flow:column-reverse}
}

/* ── ALERT ───────────────────────────────────────────────────────────── */
.alert{background:rgba(6,106,171,.06);border:1px solid var(--border);border-radius:var(--rl);padding:1rem 1.25rem;margin-bottom:1rem}
.alert__inner{font-size:.875rem;color:var(--text);line-height:1.6}
.alert__inner b{color:var(--gold)}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.footer{
  background:var(--bg);border-top:1px solid var(--border);padding:1.25rem 0;
  text-align:center;font-family:var(--f-ui);font-size:.68rem;letter-spacing:.1em;color:var(--muted);
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media screen and (max-width:900px){
  .cust-help .wrapper{margin-top:48px}
  .topics__block{width:100%}
}
@media screen and (max-width:580px){
  .preview{padding:1.5rem .5rem;-ms-flex-wrap:wrap;flex-wrap:wrap}
  .preview .preview__text{width:100%}
  .topics{padding:1.5rem 0 0}
  .topics .topics__list{padding-left:16px}
}
@media screen and (max-width:480px){
  .cust-help .contr{padding:0 1rem}
  .form-submit-ticket{padding:1.25rem 1rem 2.5rem}
  .navlink{max-width:100%;margin:8px 0}
}

/* ── PRINT ───────────────────────────────────────────────────────────── */
@media print{
  body{background:#fff!important;color:#000!important}
  .header,.footer,.breadcrumbs,.btn{display:none!important}
  a{color:#000!important}
}