/* ================================================================
   Shop Engine — Roundcube skin
   Extends: elastic  |  Loaded via meta.json "links" (before elastic CSS)
   All overrides use !important to beat elastic cascade
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@600;700&display=swap');

/* ── CSS custom properties ───────────────────────────────────── */
:root {
  --se-ink:        #0e0b2a;
  --se-ink-2:      #16133a;
  --se-indigo:     #2c2689;
  --se-indigo-2:   #3d36b8;
  --se-lite:       #8b83ff;
  --se-paper:      #f4f3fb;
  --se-paper-2:    #eeecf8;
  --se-muted:      #6a6688;
  --se-line:       rgba(14,11,42,.10);
}

/* ── Base font ───────────────────────────────────────────────── */
body,
html,
input,
textarea,
select,
button {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Links ───────────────────────────────────────────────────── */
a { color: #8b83ff !important; }
a:hover { color: #3d36b8 !important; }

/* ══════════════════════════════════════════════════════════════
   APP CHROME  (mail / contacts / settings)
   ══════════════════════════════════════════════════════════════ */
html, body {
  background-color: #f2f1f8 !important;
}

body:not(.task-login) #layout {
  background: #f2f1f8 !important;
}

#layout > div {
  border-color: rgba(14,11,42,.08) !important;
}

/* square UI — as on shop-engine.ru */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* hide leftover Roundcube chrome */
#taskmenu a.about {
  display: none !important;
}

/* hide skin picker (Classic / Elastic / Larry) */
form.propform:has(input[name="_skin"]) .listing,
.propform .skins,
#rcmfd_skin,
input[name="_skin"],
input[value="classic"],
input[value="elastic"],
input[value="larry"],
label:has(input[name="_skin"]),
.form-group:has(input[name="_skin"]),
fieldset:has(input[name="_skin"]) {
  display: none !important;
}

@media (min-width: 1025px) {
  #layout-menu .popover-header {
    display: none !important;
  }
  #layout-menu,
  #taskmenu,
  #taskmenu .action-buttons,
  #taskmenu .special-buttons {
    overflow: visible !important;
  }
  #taskmenu a,
  #taskmenu a.button,
  #taskmenu .menu.toolbar a,
  .menu.toolbar#taskmenu a {
    width: 78px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  #taskmenu a > span.inner {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    display: block !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: inherit !important;
    padding: 2px 4px 0 !important;
    white-space: normal !important;
    word-break: normal !important;
  }
}

/* ── Left icon rail ─────────────────────────────────────────── */
#layout-menu,
#taskmenu {
  background: #0e0b2a !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  color: #fff !important;
  overflow: visible !important;
}

#taskmenu a,
#taskmenu a.button {
  color: rgba(255,255,255,.55) !important;
  background: transparent !important;
  margin: 2px 0 !important;
  padding: 8px 4px 10px !important;
  box-sizing: border-box !important;
  height: auto !important;
  overflow: visible !important;
}

#taskmenu li,
#taskmenu .action-buttons,
#taskmenu .special-buttons {
  height: auto !important;
  overflow: visible !important;
}

#taskmenu a:before,
#taskmenu a.button:before {
  color: rgba(255,255,255,.55) !important;
}

#taskmenu a:hover,
#taskmenu a.selected,
#taskmenu a.button:hover,
#taskmenu a.button.selected {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

#taskmenu a:hover:before,
#taskmenu a.selected:before {
  color: #fff !important;
}

#taskmenu a.compose,
#taskmenu a.compose:hover,
#taskmenu a.logout,
#taskmenu a.logout:hover,
#taskmenu .special-buttons,
#taskmenu .special-buttons a,
#taskmenu .action-buttons a {
  background: transparent !important;
  color: rgba(255,255,255,.55) !important;
}

#taskmenu a.compose:hover,
#taskmenu a.logout:hover,
#taskmenu .action-buttons a:hover,
#taskmenu .special-buttons a:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

#taskmenu a.compose:before,
#taskmenu a.logout:before,
.floating-action-buttons a.button:before {
  color: inherit !important;
}

#taskmenu .special-buttons {
  background: #0e0b2a !important;
  padding: 8px 0 12px !important;
}

#taskmenu .action-buttons {
  padding: 8px 0 4px !important;
}

.floating-action-buttons a.button,
.floating-action-buttons button.btn {
  background: #2c2689 !important;
  color: #fff !important;
}

/* ── Folder / settings sidebar: light, readable ─────────────── */
#layout-sidebar,
#layout-sidebar > .scroller,
#folderlist-content {
  background: #fff !important;
  color: #0e0b2a !important;
  border-right: 1px solid rgba(14,11,42,.08) !important;
}

#layout-sidebar > .header,
#layout-sidebar > .footer {
  background: #fff !important;
  color: #0e0b2a !important;
  border-color: rgba(14,11,42,.08) !important;
}

#layout-sidebar .header-title,
#layout-sidebar .username {
  color: #0e0b2a !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#layout-sidebar > .header a.button,
#layout-sidebar > .header a.button:before {
  color: #6a6688 !important;
}

#mailboxlist li > a,
#settings-menu li > a,
.folderlist li > a,
.treelist li > a {
  color: #0e0b2a !important;
  border: 0 !important;
  margin: 1px 6px !important;
  font-weight: 600 !important;
}

#mailboxlist li > a:hover,
#settings-menu li > a:hover,
.folderlist li > a:hover,
.treelist li > a:hover {
  background: #f4f3fb !important;
  color: #2c2689 !important;
}

#mailboxlist li.selected > a,
#mailboxlist li > a.selected,
#settings-menu li.selected > a,
.folderlist li.selected > a,
.treelist li.selected > a {
  background: rgba(44,38,137,.08) !important;
  color: #2c2689 !important;
  box-shadow: inset 2px 0 0 #2c2689 !important;
}

.unreadcount,
#mailboxlist .unreadcount {
  background: #2c2689 !important;
  color: #fff !important;
}

.quota-widget,
#quotadisplay {
  color: #6a6688 !important;
}

.quota-bar .bar-inner {
  background: #2c2689 !important;
}

/* ── List + content panes ───────────────────────────────────── */
#layout-list,
#layout-content {
  background: #fff !important;
}

#layout-list {
  border-right: 1px solid rgba(14,11,42,.08) !important;
}

#layout-list > .header,
#layout-content > .header,
#layout-preview > .header,
#messagelist-header {
  background: #fff !important;
  border-bottom: 1px solid rgba(14,11,42,.08) !important;
  color: #0e0b2a !important;
  overflow: visible !important;
}

#layout-list > .header a.button,
#layout-content > .header a.button,
#layout-list > .header button.btn,
#layout-content > .header button.btn,
#layout-content > .header a,
#layout-list > .header a {
  color: #0e0b2a !important;
}

#layout-list > .header a .inner,
#layout-content > .header a .inner,
#messagelist-header a .inner,
.header .toolbar a .inner {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  overflow: visible !important;
  font-size: 11px !important;
}

#layout-list > .header a:hover,
#layout-content > .header a:hover,
#layout-content > .header a.button:hover {
  background: #f4f3fb !important;
  color: #2c2689 !important;
}

#layout-content > .header a.reply,
#layout-content > .header a.reply-all,
#layout-content > .header a.forward,
#layout-content > .header a.delete,
#layout-content > .footer a {
  color: #0e0b2a !important;
}

.footer.toolbar,
#layout-list > .footer,
#layout-content > .footer {
  background: #fff !important;
  border-top: 1px solid rgba(14,11,42,.08) !important;
}

/* search */
.searchbar,
#mailsearchform,
#layout-list .searchbar {
  background: #f4f3fb !important;
  border: 1px solid rgba(14,11,42,.08) !important;
  margin: 8px 12px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.searchbar form {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  height: 100% !important;
  margin: 0 !important;
}

.searchbar form:before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  line-height: 1 !important;
  margin: 0 0 0 12px !important;
  color: #6a6688 !important;
  float: none !important;
}

.searchbar a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

.searchbar a:before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  line-height: 1 !important;
  margin: 0 !important;
  float: none !important;
}

.searchbar input,
.searchbar input:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0e0b2a !important;
  height: 100% !important;
  line-height: normal !important;
  padding: 0 10px !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary,
button.btn.submit,
button.btn.save,
button.btn.create,
button.btn.send,
button.btn.yes,
button.btn.continue,
a.button.submit,
a.button.save,
a.button.create {
  background-color: #2c2689 !important;
  border-color: #2c2689 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.btn-primary:hover,
button.btn.submit:hover,
button.btn.save:hover,
button.btn.send:hover,
a.button.submit:hover {
  background-color: #3d36b8 !important;
  border-color: #3d36b8 !important;
}

/* ── Message / contact lists ────────────────────────────────── */
#messagelist,
#messagelist-content,
#layout-list .scroller {
  background: #fff !important;
}

#messagelist thead th,
.listing thead th,
.messagelist thead th {
  background: #f8f7fd !important;
  color: #6a6688 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(14,11,42,.08) !important;
  border-top: 0 !important;
}

#messagelist tbody tr td,
.listing tbody tr td,
.messagelist tbody tr td {
  border-color: rgba(14,11,42,.06) !important;
  color: #0e0b2a !important;
}

#messagelist tbody tr:hover td,
.listing tbody tr:hover td {
  background: #f4f3fb !important;
}

#messagelist tr.selected td,
.messagelist tr.selected td,
.listing tr.selected td,
.listing tr.focused td {
  background: rgba(44,38,137,.08) !important;
  color: #0e0b2a !important;
}

#messagelist tr.unread td,
#messagelist tr.unread td.subject a {
  font-weight: 700 !important;
  color: #0e0b2a !important;
}

#messagelist td.subject a,
.messagelist td.subject a {
  color: #0e0b2a !important;
}

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE — 50 / 50 SPLIT
   Left: form   |   Right: brand art
   ══════════════════════════════════════════════════════════════ */
body.task-login,
html:has(body.task-login) {
  background: #fff !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.task-login::before,
body.task-login::after {
  content: none !important;
  display: none !important;
}

body.task-login #layout {
  display: block !important;
  min-height: 100vh !important;
  background: #fff !important;
  width: 100% !important;
  max-width: none !important;
}

body.task-login #layout-content,
body.task-login .se-login {
  display: grid !important;
  grid-template-columns: minmax(380px, 44%) 1fr !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  text-align: left !important;
}

/* ── LEFT: form panel ───────────────────────────────────────── */
.se-login__panel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 56px !important;
  background: #fff !important;
  position: relative !important;
  z-index: 2 !important;
  text-align: left !important;
}

.se-login__inner {
  width: 100% !important;
  max-width: 380px !important;
}

body.task-login #logo {
  display: none !important;
}

.se-login__brand {
  margin: 0 0 28px !important;
  font-family: 'Unbounded', 'Manrope', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  color: #0e0b2a !important;
}

.se-login__brand em {
  font-style: normal !important;
  color: #2c2689 !important;
}

.se-login__title {
  margin: 0 0 10px !important;
  font-family: 'Unbounded', 'Manrope', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  line-height: 1.1 !important;
  color: #0e0b2a !important;
}

.se-login__lead {
  margin: 0 0 28px !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #6a6688 !important;
}

body.task-login #login-form,
body.task-login form#login-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: static !important;
  top: auto !important;
}

body.task-login #login-form table {
  width: 100% !important;
  border: 0 !important;
  margin: 0 !important;
}

body.task-login #login-form tr.form-group {
  display: block !important;
  margin: 0 0 14px !important;
}

body.task-login #login-form td.title {
  display: none !important;
}

body.task-login #login-form td.input,
body.task-login .input-group {
  display: flex !important;
  width: 100% !important;
  border: 1px solid rgba(14,11,42,.10) !important;
  background: #f4f3fb !important;
  overflow: hidden !important;
  min-height: 48px !important;
}

body.task-login .input-group:focus-within {
  border-color: #2c2689 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(44,38,137,.12) !important;
}

body.task-login .input-group-prepend,
body.task-login .input-group-text {
  background: transparent !important;
  border: 0 !important;
  color: #6a6688 !important;
  padding: 0 4px 0 14px !important;
  display: flex !important;
  align-items: center !important;
}

body.task-login input.form-control {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #0e0b2a !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 0 14px 0 8px !important;
  min-height: 48px !important;
}

body.task-login .formbuttons {
  margin: 8px 0 0 !important;
}

body.task-login button[type=submit],
body.task-login button.btn.submit,
body.task-login .btn-primary {
  width: 100% !important;
  min-height: 48px !important;
  background: #2c2689 !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

body.task-login button[type=submit]:hover,
body.task-login .btn-primary:hover {
  background: #3d36b8 !important;
  transform: none !important;
}

body.task-login #login-footer {
  margin-top: 18px !important;
  text-align: center !important;
  color: #6a6688 !important;
  font-size: 12px !important;
}

body.task-login #login-footer a {
  color: #2c2689 !important;
}

/* ── RIGHT: brand art ───────────────────────────────────────── */
.se-login__art {
  background: #0e0b2a !important;
  color: #fff !important;
  padding: 64px 72px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
}

.se-login__art::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 80% 70% at 0% 100%, rgba(44,38,137,.55), transparent 60%),
    radial-gradient(circle 280px at 90% 12%, rgba(139,131,255,.18), transparent 55%) !important;
  pointer-events: none !important;
}

.se-login__art > * {
  position: relative !important;
  z-index: 1 !important;
  text-align: left !important;
  max-width: 480px !important;
}

.se-login__art-kicker {
  margin: 0 0 16px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.82) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.se-login__art-kicker::before {
  content: '' !important;
  width: 22px !important;
  height: 2px !important;
  background: currentColor !important;
}

.se-login__art-title {
  margin: 0 0 20px !important;
  font-family: 'Unbounded', 'Manrope', sans-serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  line-height: 1.05 !important;
  color: #fff !important;
}

.se-login__art-text {
  margin: 0 0 28px !important;
  max-width: 420px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.68) !important;
}

.se-login__points {
  margin: 0 0 36px !important;
  padding: 0 !important;
  list-style: none !important;
  color: rgba(255,255,255,.72) !important;
}

.se-login__points li {
  padding: 8px 0 8px 18px !important;
  position: relative !important;
  font-size: 14.5px !important;
}

.se-login__points li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 17px !important;
  width: 7px !important;
  height: 7px !important;
  background: #8b83ff !important;
  border-radius: 50% !important;
}

.se-login__cards {
  display: grid !important;
  gap: 10px !important;
  max-width: 380px !important;
}

.se-login__card {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  display: grid !important;
  gap: 4px !important;
}

.se-login__card--dim {
  opacity: .55 !important;
}

.se-login__card-from {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #8b83ff !important;
}

.se-login__card-subj {
  font-size: 14px !important;
  color: #fff !important;
}

@media (max-width: 860px) {
  body.task-login,
  html:has(body.task-login) {
    overflow: auto !important;
  }
  body.task-login #layout-content,
  body.task-login .se-login {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .se-login__panel {
    padding: 40px 24px 32px !important;
    min-height: auto !important;
  }
  .se-login__art {
    min-height: 280px !important;
    padding: 36px 24px 48px !important;
  }
  .se-login__art-title {
    font-size: 28px !important;
  }
  .se-login__cards { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   FORMS, COMPOSE, SETTINGS, DIALOGS
   ══════════════════════════════════════════════════════════════ */
.form-control,
input.form-control,
textarea.form-control,
select.form-control,
.custom-select {
  border-color: rgba(14,11,42,.12) !important;
  color: #0e0b2a !important;
  background-color: #f4f3fb !important;
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
  border-color: #2c2689 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(44,38,137,.12) !important;
  outline: none !important;
}

.recipient,
.recipients-input .recipient {
  background: rgba(44,38,137,.10) !important;
  color: #2c2689 !important;
  border: 1px solid rgba(44,38,137,.20) !important;
}

#compose-subject input,
#compose_to,
.compose-headers input {
  font-weight: 600 !important;
  color: #0e0b2a !important;
}

body.action-compose #layout-content > .header {
  background: #fff !important;
}

.ui-dialog,
.popupmenu,
#listmenu {
  box-shadow: 0 12px 40px rgba(14,11,42,.16) !important;
  border: 1px solid rgba(14,11,42,.08) !important;
  background: #fff !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: #0e0b2a !important;
  color: #fff !important;
  font-family: 'Unbounded', 'Manrope', sans-serif !important;
  font-size: 13px !important;
}

.ui-dialog .ui-dialog-titlebar-close span {
  color: rgba(255,255,255,.7) !important;
}

ul.popupmenu li a,
.popupmenu li a {
  color: #0e0b2a !important;
  font-weight: 600 !important;
}

ul.popupmenu li a:hover,
ul.popupmenu li a.selected,
.popupmenu li a:hover {
  background: #f4f3fb !important;
  color: #2c2689 !important;
}

#message-header,
#contacthead {
  background: #fff !important;
  border-bottom: 1px solid rgba(14,11,42,.08) !important;
}

#message-header .subject,
#message-header h2,
#message-header h3 {
  color: #0e0b2a !important;
  font-family: 'Unbounded', 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
}

#messagebody,
#message-content {
  background: #fff !important;
}

.alert-success,
#notifications .alert-success {
  background-color: #2c2689 !important;
  border-color: #2c2689 !important;
  color: #fff !important;
}

.attachment-name,
.attachmentname,
#attachment-list li {
  background: #eeecf8 !important;
  color: #2c2689 !important;
  border: 1px solid rgba(44,38,137,.12) !important;
}

.paging a { color: #6a6688 !important; }
.paging a.current,
.paging a:hover {
  background: #2c2689 !important;
  color: #fff !important;
  border-color: #2c2689 !important;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f4f3fb; }
::-webkit-scrollbar-thumb { background: #c5c0e8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8b83ff; }
* { scrollbar-width: thin; scrollbar-color: #c5c0e8 #f4f3fb; }

/* mobile header buttons stay on-brand */
a.toolbar-menu-button,
a.toolbar-list-button,
button.btn.toolbar-menu-button {
  background: #0e0b2a !important;
  color: #fff !important;
}