:root {
  --wf-bg: #fff3df;
  --wf-bg-soft: #fff9f0;
  --wf-paper: #fffdf8;
  --wf-paper-strong: #ffffff;
  --wf-orange: #f57a1f;
  --wf-orange-deep: #d95712;
  --wf-orange-soft: #fff0df;
  --wf-yellow: #ffbd20;
  --wf-yellow-soft: #fff6c9;
  --wf-red: #e83e32;
  --wf-green: #244f3d;
  --wf-green-2: #32664f;
  --wf-green-soft: #eaf4ed;
  --wf-navy: #10243c;
  --wf-text: #2f2a24;
  --wf-muted: #796e63;
  --wf-line: #ecdfce;
  --wf-line-strong: #ddcfbc;
  --wf-danger: #b94738;
  --wf-radius-sm: 11px;
  --wf-radius: 17px;
  --wf-radius-lg: 28px;
  --wf-shadow: 0 18px 50px rgba(73, 52, 29, .13);
  --wf-shadow-soft: 0 7px 22px rgba(73, 52, 29, .08);
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--wf-text);
}
body { background: var(--wf-bg-soft); }
a { color: var(--wf-green-2); }
a:hover { color: var(--wf-orange-deep); }

/* Shared controls */
.btn, button, input, select, textarea, .form-control, .custom-select { border-radius: var(--wf-radius-sm) !important; }
.form-control, .custom-select, input[type="text"], input[type="password"], input[type="email"], textarea {
  border-color: var(--wf-line-strong) !important;
  background-color: #fff !important;
  color: var(--wf-text) !important;
  min-height: 42px;
}
.form-control:focus, .custom-select:focus, input:focus, textarea:focus {
  border-color: var(--wf-orange) !important;
  box-shadow: 0 0 0 3px rgba(245, 122, 31, .14) !important;
}
.btn-primary, button.btn-primary, .button.mainaction, input.button.mainaction {
  background: linear-gradient(135deg, #ff8d24, #ee6816) !important;
  border-color: var(--wf-orange) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(230, 100, 20, .18) !important;
}
.btn-primary:hover, button.btn-primary:hover, .button.mainaction:hover, input.button.mainaction:hover {
  background: linear-gradient(135deg, #ef7517, #d95410) !important;
  border-color: var(--wf-orange-deep) !important;
}
.btn-secondary { background: var(--wf-paper) !important; border-color: var(--wf-line-strong) !important; color: var(--wf-green) !important; }

/* Login — R288.29 playful WEFOOD brand */
.task-login {
  background: var(--wf-bg);
  min-width: 0 !important;
}
.task-login #layout {
  min-height: 100vh;
  height: auto !important;
  background: transparent;
  overflow: visible !important;
}
.task-login #layout-content.wefood-login-page {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  padding: 34px 28px !important;
  margin: 0 !important;
  text-align: left !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 9% 14%, rgba(255,189,32,.25), transparent 21%),
    radial-gradient(circle at 91% 15%, rgba(245,122,31,.13), transparent 19%),
    radial-gradient(circle at 83% 88%, rgba(36,79,61,.08), transparent 24%),
    linear-gradient(135deg, #fff8e8 0%, #fff3df 48%, #fffaf2 100%) !important;
}
.task-login #logo { display: none !important; }

.wefood-login-shell {
  width: min(1140px, 100%);
  min-height: 620px;
  display: grid;
  grid-template-columns: 48% 52%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--wf-paper-strong);
  border: 1px solid #ead7bf;
  border-radius: 30px;
  box-shadow: 0 28px 76px rgba(91, 60, 27, .15);
}

.wefood-login-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 36px 30px;
  color: var(--wf-navy);
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.88), transparent 24%),
    linear-gradient(145deg, #ffd95b 0%, #ffb51d 42%, #ff8a20 100%);
  overflow: hidden;
}
.wefood-login-brand::before,
.wefood-login-brand::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.wefood-login-brand::before {
  width: 310px;
  height: 310px;
  right: -165px;
  top: -120px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.30);
}
.wefood-login-brand::after {
  width: 240px;
  height: 240px;
  left: -145px;
  bottom: -135px;
  background: rgba(16,36,60,.06);
  border: 1px solid rgba(16,36,60,.08);
}

.wefood-brand-visual {
  position: relative;
  z-index: 2;
  min-height: 345px;
  display: grid;
  place-items: center;
}
.wefood-logo-stage {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: min(350px, 78%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  border: 4px solid rgba(255,255,255,.70);
  box-shadow: 0 20px 40px rgba(83,45,8,.18), inset 0 0 0 1px rgba(16,36,60,.05);
}
.wefood-company-logo {
  display: block;
  width: 94%;
  height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 9px 13px rgba(53,38,18,.12));
}

.wefood-food-sticker {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  border: 2px solid rgba(16,36,60,.08);
  box-shadow: 0 10px 20px rgba(73,44,13,.15);
  font-size: 29px;
  line-height: 1;
  user-select: none;
}
.wf-pizza { left: 4%; top: 8%; transform: rotate(-10deg); }
.wf-sushi { right: 3%; top: 15%; transform: rotate(8deg); }
.wf-noodle { left: 1%; bottom: 12%; transform: rotate(7deg); }
.wf-burger { right: 2%; bottom: 13%; transform: rotate(-7deg); }
.wf-cake { left: 15%; bottom: 0; transform: rotate(-5deg); }
.wf-pin { right: 14%; bottom: 0; transform: rotate(6deg); }

.wefood-brand-message {
  position: relative;
  z-index: 3;
  max-width: 465px;
  margin: 7px auto 0;
  padding: 22px 24px 4px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 11px 26px rgba(107,63,15,.11);
  backdrop-filter: blur(4px);
}
.wefood-kicker {
  margin: 0 0 9px;
  color: var(--wf-red);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: .17em;
}
.wefood-login-brand h2 {
  margin: 0;
  color: var(--wf-navy);
  font-size: 25px;
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: -.02em;
}
.wefood-brand-copy {
  margin: 12px 0 0;
  color: #645142;
  font-size: 13px;
  line-height: 1.75;
}
.wefood-brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}
.wefood-brand-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff7e8;
  border: 1px solid #efd3a9;
  color: #664928;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.wefood-login-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 54px 54px;
  background:
    radial-gradient(circle at 95% 5%, rgba(255,189,32,.10), transparent 18%),
    #fffdf9;
}
.wefood-login-card::after {
  content: "🍴  🍊  🍜";
  position: absolute;
  right: 30px;
  bottom: 22px;
  color: rgba(121,110,99,.25);
  font-size: 18px;
  letter-spacing: 6px;
  pointer-events: none;
}
.wefood-login-card-inner {
  position: relative;
  z-index: 1;
  width: min(445px, 100%);
  margin: 0 auto;
}
.wefood-login-card-head {
  margin: 0 0 25px;
  text-align: left;
}
.wefood-mini-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding: 6px 11px 6px 7px;
  border-radius: 999px;
  background: var(--wf-yellow-soft);
  border: 1px solid #efd98a;
  color: var(--wf-navy);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}
.wefood-mini-brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}
.wefood-eyebrow {
  margin: 0 0 8px;
  color: var(--wf-orange-deep);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: .04em;
}
.wefood-login-card-head h2 {
  margin: 0 0 11px;
  color: var(--wf-green);
  font-size: 29px;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: -.02em;
}
.wefood-login-card-head > p:last-child {
  margin: 0;
  color: var(--wf-muted);
  font-size: 14px;
  line-height: 1.75;
}
.wefood-login-card-head strong { color: var(--wf-green); }

/* Reset Elastic's native login positioning completely. */
.task-login #login-form,
.task-login #login-form.wefood-login-form {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.task-login #login-form table,
.task-login #login-form tbody {
  display: table !important;
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.task-login #login-form tbody { display: table-row-group !important; }
.task-login #login-form tr { display: table-row !important; }
.task-login #login-form td {
  display: table-cell !important;
  width: auto !important;
  padding: 0 0 15px !important;
  border: 0 !important;
  vertical-align: middle !important;
}
.task-login #login-form .row { margin-right: 0 !important; margin-left: 0 !important; }
.task-login #login-form .form-group { margin: 0 0 15px !important; }
.task-login #login-form label {
  position: static !important;
  float: none !important;
  display: block;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: var(--wf-text) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 850 !important;
  text-align: left !important;
  transform: none !important;
}
.task-login #login-form .input-group { display: flex !important; width: 100% !important; margin: 0 !important; }
.task-login #login-form .input-group-prepend,
.task-login #login-form .input-group-text { flex: 0 0 auto; }
.task-login #login-form .input-group-text {
  min-width: 46px;
  justify-content: center;
  border-color: var(--wf-line-strong) !important;
  background: #fff4dd !important;
  color: var(--wf-orange-deep) !important;
  border-radius: 12px 0 0 12px !important;
}
.task-login #login-form .form-control,
.task-login #login-form input[type="text"],
.task-login #login-form input[type="email"],
.task-login #login-form input[type="password"] {
  position: static !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 49px !important;
  min-height: 49px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  color: var(--wf-text) !important;
  font-size: 15px !important;
  line-height: 49px !important;
  border: 1px solid var(--wf-line-strong) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.task-login #login-form .input-group .form-control { border-radius: 0 12px 12px 0 !important; }
.task-login #login-form .form-control:focus,
.task-login #login-form input:focus {
  z-index: 2;
  border-color: var(--wf-orange) !important;
  box-shadow: 0 0 0 3px rgba(245,122,31,.13) !important;
}
.task-login #login-form .formbuttons {
  width: 100% !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.task-login #rcmloginsubmit,
.task-login #login-form input[type="submit"],
.task-login #login-form button[type="submit"] {
  display: block !important;
  width: 100% !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 1px solid var(--wf-orange) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #ff9228, #ee6816) !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 48px !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: 0 9px 20px rgba(230,100,20,.18) !important;
}
.task-login #rcmloginsubmit:hover,
.task-login #login-form input[type="submit"]:hover,
.task-login #login-form button[type="submit"]:hover {
  border-color: var(--wf-orange-deep) !important;
  background: linear-gradient(135deg, #ef7719, #d95511) !important;
  transform: translateY(-1px);
}
.task-login #rcmloginsubmit::before { display: none !important; }

.wefood-login-help {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 19px 0 0;
  padding: 13px 15px;
  border: 1px solid #d7e5db;
  border-radius: 13px;
  background: var(--wf-green-soft);
  color: #52695e;
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
}
.wefood-help-icon { flex: 0 0 auto; font-size: 18px; line-height: 1.5; }
.wefood-login-help strong,
.wefood-login-help div > span { display: block; }
.wefood-login-help strong { margin-bottom: 3px; color: var(--wf-green); font-weight: 900; }
.wefood-after-login-note {
  margin-top: 14px;
  color: #9a6a36;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.task-login #login-footer.wefood-login-footer {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 17px 0 0 !important;
  padding: 0 !important;
  color: var(--wf-muted) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  text-align: center !important;
  background: transparent !important;
}
.task-login #login-footer.wefood-login-footer > div {
  margin: 9px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.wefood-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  padding: 0 14px;
  border: 1px solid var(--wf-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--wf-green) !important;
  font-weight: 850;
  text-decoration: none !important;
}
.wefood-back-link:hover {
  border-color: #e4bd91;
  background: var(--wf-orange-soft);
  color: var(--wf-orange-deep) !important;
}

/* Make Roundcube alerts sit above the card instead of covering form fields. */
.task-login #messagestack {
  position: fixed !important;
  z-index: 5000 !important;
  top: 18px !important;
  right: 18px !important;
  left: auto !important;
  width: min(420px, calc(100vw - 36px)) !important;
}

/* Main shell — keep the playful brand after login too */
#layout { background: var(--wf-bg-soft); }
#layout-menu {
  background: linear-gradient(180deg, #173e33 0%, #244f3d 62%, #1c4034 100%) !important;
  border-right: 0 !important;
}
#layout-menu .popover-header {
  min-height: 94px;
  padding-top: 12px !important;
  background: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
  text-align: center;
}
#layout-menu #logo { opacity: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden; }
#layout-menu .popover-header:before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 5px;
  border-radius: 50%;
  background: #fff url("../images/wefood-company-logo.png") center/94% no-repeat;
  box-shadow: 0 5px 12px rgba(0,0,0,.15);
}
#layout-menu .popover-header:after {
  content: "WEFOOD 公司信箱";
  display: block;
  color: #ffd5a5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}
#taskmenu a, #taskmenu a .inner { color: rgba(255,255,255,.80) !important; }
#taskmenu a:hover { background: rgba(255,255,255,.08) !important; }
#taskmenu a.selected, #taskmenu a.compose.selected { background: rgba(255,255,255,.13) !important; color: #fff !important; }
#taskmenu .compose {
  background: linear-gradient(135deg, #ff9228, #ed6615) !important;
  color: #fff !important;
  box-shadow: 0 6px 15px rgba(0,0,0,.13);
}
#taskmenu .compose:hover { background: linear-gradient(135deg, #ef7819, #d85411) !important; }

#layout-sidebar, #layout-list, #layout-content { background: var(--wf-paper-strong); }
#layout-sidebar { border-right-color: var(--wf-line) !important; }
#layout-list { border-right-color: var(--wf-line) !important; }
.header {
  min-height: 58px;
  border-color: var(--wf-line) !important;
  background: rgba(255,253,249,.97) !important;
}
.header .header-title { color: var(--wf-green) !important; font-weight: 900 !important; }

/* Mail folders */
#folderlist-content { background: #fffaf2; }
#mailboxlist { padding: 10px 8px 18px; }
#mailboxlist li a { margin: 3px 0; border-radius: 11px; color: #514b44; }
#mailboxlist li a:hover { background: var(--wf-orange-soft) !important; }
#mailboxlist li.selected > a { background: #ffead6 !important; color: var(--wf-orange-deep) !important; font-weight: 900; }
#mailboxlist .unreadcount { background: var(--wf-orange) !important; color: #fff !important; border-radius: 999px !important; }
#quotadisplay { color: var(--wf-muted); }

/* Search */
.searchbar { background: #fffdf9 !important; border-color: var(--wf-line) !important; }
.searchbar input { background: #fff !important; }

/* Message list */
#messagelist-content { background: #fff; }
#messagelist { font-size: 14px; }
#messagelist tr { border-bottom: 1px solid #f0e7dc !important; }
#messagelist tr td { height: 54px; padding-top: 8px; padding-bottom: 8px; }
#messagelist tr:hover td { background: #fff8ef !important; }
#messagelist tr.selected td { background: #ffead9 !important; }
#messagelist tr.unread td { font-weight: 850; color: #28231e; }
#messagelist tr.unread td.subject a { color: var(--wf-green); }
#messagelist .date, #messagelist .size { color: #998c7f; font-size: 12px; }

/* Message reading */
.frame-content { background: #fbf8f3 !important; padding: 18px !important; }
#message-header {
  margin-bottom: 14px;
  padding: 20px 22px;
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  background: var(--wf-paper-strong);
  box-shadow: var(--wf-shadow-soft);
}
#message-header .subject { margin-bottom: 15px; color: var(--wf-green); font-size: 22px; font-weight: 900; line-height: 1.45; }
#message-header > .header { min-height: 0; background: transparent !important; border: 0 !important; }
#message-header .contactphoto { border-radius: 50%; }
#message-header .header-summary { color: var(--wf-text); }
#message-header .header-headers { color: var(--wf-muted); }
#message-content {
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--wf-shadow-soft);
}
#message-content .rightcol { padding: 24px !important; }
#messagebody { color: #38322c; line-height: 1.72; }
#attachment-list { background: #fffaf4; }
.attachmentslist li { border-radius: 10px; }

/* Composer */
.task-mail.action-compose #layout-content { background: #fbf8f3; }
#compose-content { margin: 16px; border: 1px solid var(--wf-line); border-radius: var(--wf-radius); background: #fff; box-shadow: var(--wf-shadow-soft); overflow: hidden; }
#compose-headers { padding: 18px 20px 4px; background: #fffdf9; border-bottom: 1px solid var(--wf-line); }
#compose-headers label { color: var(--wf-green); font-weight: 850; }
#compose-subject, #compose_to input, #compose_cc input, #compose_bcc input { border-radius: 10px !important; }
#composebody { background: #fff; }
#compose-attachments, #compose-options { margin: 12px; padding: 16px; border: 1px solid var(--wf-line); border-radius: 14px; background: #fff; }
#messagetoolbar a:hover { color: var(--wf-orange) !important; }

/* Settings + Contacts */
.task-settings #layout-list, .task-addressbook #layout-list { background: #fffaf4; }
.task-settings .listing li, .task-settings .listing tr, .task-addressbook .listing li, .task-addressbook .listing tr { border-color: #eee4d8 !important; }
.task-settings .listing .selected, .task-addressbook .listing .selected { background: #ffead8 !important; color: var(--wf-orange-deep) !important; }
.propform .form-group, .formcontent .form-group { border-color: var(--wf-line) !important; }

/* Popups / dialogs */
.popupmenu, .ui-dialog, .popover { border-color: var(--wf-line) !important; border-radius: 14px !important; box-shadow: var(--wf-shadow) !important; overflow: hidden; }
.popupmenu .listing a:hover, .popupmenu .listing .selected { background: var(--wf-orange-soft) !important; color: var(--wf-orange-deep) !important; }
.ui-dialog-titlebar { background: var(--wf-green) !important; color: #fff !important; }

/* Status messages */
#messagestack .alert, .alert { border-radius: 12px !important; border-width: 1px !important; box-shadow: var(--wf-shadow-soft); }
.alert-success { background: #edf6ef !important; border-color: #cce3d2 !important; color: #356047 !important; }
.alert-warning { background: #fff4df !important; border-color: #f0d39a !important; color: #76561f !important; }
.alert-danger { background: #fff0ed !important; border-color: #ecc9c2 !important; color: #893d34 !important; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #d9caba transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d9caba; border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; }

/* Mobile */
@media (max-width: 1024px) {
  .wefood-login-shell { grid-template-columns: 45% 55%; }
  .wefood-logo-stage { width: min(310px, 84%); }
  .wefood-brand-visual { min-height: 320px; }
  .wefood-login-card { padding: 45px 38px; }
  #layout-menu .popover-header:before { width: 50px; height: 50px; }
  .frame-content { padding: 10px !important; }
  #message-header { padding: 16px; border-radius: 13px; }
  #message-content { border-radius: 13px; }
}
@media (max-width: 768px) {
  .task-login #layout-content.wefood-login-page {
    display: block !important;
    min-height: 100vh !important;
    padding: 0 !important;
    background: #fffaf3 !important;
  }
  .wefood-login-shell {
    width: 100%;
    min-height: 100vh;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .wefood-login-brand {
    min-height: 0;
    padding: 20px 20px 23px;
  }
  .wefood-brand-visual { min-height: 220px; }
  .wefood-logo-stage { width: 185px; }
  .wefood-food-sticker { width: 42px; height: 42px; border-radius: 14px; font-size: 22px; }
  .wf-pizza { left: 6%; top: 5%; }
  .wf-sushi { right: 7%; top: 11%; }
  .wf-noodle { left: 7%; bottom: 5%; }
  .wf-burger { right: 8%; bottom: 5%; }
  .wf-cake, .wf-pin { display: none; }
  .wefood-brand-message {
    max-width: 560px;
    margin-top: 3px;
    padding: 16px 17px 15px;
    border-radius: 17px;
  }
  .wefood-kicker { display: none; }
  .wefood-login-brand h2 { font-size: 20px; line-height: 1.4; }
  .wefood-brand-copy { margin-top: 8px; font-size: 12px; line-height: 1.65; }
  .wefood-brand-tags { margin-top: 11px; gap: 6px; }
  .wefood-brand-tags span { min-height: 27px; padding: 0 8px; font-size: 10px; }
  .wefood-login-card {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 30px 22px 38px;
  }
  .wefood-login-card::after { display: none; }
  .wefood-login-card-inner { width: 100%; max-width: 520px; margin: 0 auto; }
  .wefood-mini-brand { margin-bottom: 13px; }
  .wefood-login-card-head { margin-bottom: 21px; }
  .wefood-login-card-head h2 { font-size: 24px; }
  .wefood-back-link { justify-content: center; width: 100%; min-height: 42px; border-radius: 11px; }
  .task-login #messagestack { top: 10px !important; right: 10px !important; width: calc(100vw - 20px) !important; }
  #messagelist tr td { height: 58px; }
  #compose-content { margin: 8px; border-radius: 12px; }
  #message-content .rightcol { padding: 16px !important; }
}
@media (max-width: 420px) {
  .wefood-brand-visual { min-height: 195px; }
  .wefood-logo-stage { width: 165px; }
  .wefood-food-sticker { width: 38px; height: 38px; font-size: 20px; border-radius: 13px; }
  .wefood-login-brand { padding: 17px 17px 20px; }
  .wefood-login-card { padding: 27px 19px 34px; }
  .wefood-login-brand h2 { font-size: 19px; }
  .wefood-login-card-head h2 { font-size: 22px; }
  .wefood-after-login-note { font-size: 11px; }
  #message-header .subject { font-size: 19px; }
}

/* ================================================================
   R288.34 — real-device corrections
   1) Roundcube skin template paths: / means current skin root.
   2) Compact desktop viewport so footer is never clipped.
   3) Force login labels into one line and stack table cells vertically.
   ================================================================ */

body.task-login {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.task-login #layout {
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}
.task-login #layout-content.wefood-login-page {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding: 18px 20px !important;
  overflow: visible !important;
}

.wefood-login-shell {
  min-height: 0 !important;
  height: auto !important;
}
.wefood-login-brand {
  padding: 24px 30px 22px !important;
}
.wefood-brand-visual {
  min-height: 282px !important;
}
.wefood-logo-stage {
  width: min(292px, 72%) !important;
}
.wefood-food-sticker {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  font-size: 25px !important;
}
.wefood-brand-message {
  margin-top: 4px !important;
  padding: 17px 20px 16px !important;
}
.wefood-login-brand h2 {
  font-size: 23px !important;
  line-height: 1.4 !important;
}
.wefood-brand-copy {
  margin-top: 9px !important;
  line-height: 1.65 !important;
}
.wefood-brand-tags {
  margin-top: 11px !important;
}

.wefood-login-card {
  padding: 32px 46px !important;
}
.wefood-login-card-head {
  margin-bottom: 18px !important;
}
.wefood-mini-brand {
  margin-bottom: 11px !important;
}
.wefood-login-card-head h2 {
  margin-bottom: 8px !important;
  font-size: 27px !important;
}
.wefood-login-card-head > p:last-child {
  line-height: 1.6 !important;
}

/* Roundcube loginform renders a two-column table. On this branded layout,
   make every row a vertical field block so Chinese labels can never wrap. */
.task-login #login-form table,
.task-login #login-form tbody,
.task-login #login-form tr,
.task-login #login-form td {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.task-login #login-form table,
.task-login #login-form tbody {
  border-spacing: 0 !important;
}
.task-login #login-form tr {
  margin: 0 0 13px !important;
  padding: 0 !important;
}
.task-login #login-form td {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.task-login #login-form td.title,
.task-login #login-form td:first-child {
  margin-bottom: 6px !important;
}
.task-login #login-form label,
.task-login #login-form td.title,
.task-login #login-form td.title label,
.task-login #login-form td:first-child label {
  width: auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}
.task-login #login-form .input-group {
  width: 100% !important;
  min-width: 0 !important;
}
.task-login #login-form .formbuttons {
  margin-top: 1px !important;
}

.wefood-login-help {
  margin-top: 14px !important;
  padding: 11px 13px !important;
  line-height: 1.55 !important;
}
.wefood-after-login-note {
  margin-top: 10px !important;
}
.task-login #login-footer.wefood-login-footer {
  margin-top: 11px !important;
  padding-bottom: 2px !important;
}

/* Common 1366x768 office displays have only ~620–650 CSS px below browser chrome. */
@media (min-width: 769px) and (max-height: 740px) {
  .task-login #layout-content.wefood-login-page {
    place-items: start center !important;
    padding: 10px 18px 14px !important;
  }
  .wefood-login-shell {
    width: min(1080px, 100%) !important;
    grid-template-columns: 45% 55% !important;
  }
  .wefood-login-brand {
    padding: 18px 26px 17px !important;
  }
  .wefood-brand-visual {
    min-height: 235px !important;
  }
  .wefood-logo-stage {
    width: min(235px, 65%) !important;
  }
  .wefood-food-sticker {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 22px !important;
  }
  .wefood-brand-message {
    padding: 13px 17px 12px !important;
  }
  .wefood-kicker {
    margin-bottom: 5px !important;
  }
  .wefood-login-brand h2 {
    font-size: 20px !important;
  }
  .wefood-brand-copy {
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  .wefood-brand-tags {
    margin-top: 8px !important;
  }
  .wefood-brand-tags span {
    min-height: 26px !important;
    font-size: 10px !important;
  }
  .wefood-login-card {
    align-items: flex-start !important;
    padding: 22px 40px 18px !important;
  }
  .wefood-login-card-head {
    margin-bottom: 13px !important;
  }
  .wefood-mini-brand {
    margin-bottom: 7px !important;
  }
  .wefood-eyebrow {
    margin-bottom: 4px !important;
  }
  .wefood-login-card-head h2 {
    margin-bottom: 5px !important;
    font-size: 24px !important;
  }
  .wefood-login-card-head > p:last-child {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .task-login #login-form tr {
    margin-bottom: 9px !important;
  }
  .task-login #login-form td.title,
  .task-login #login-form td:first-child {
    margin-bottom: 4px !important;
  }
  .task-login #login-form .form-control,
  .task-login #login-form input[type="text"],
  .task-login #login-form input[type="email"],
  .task-login #login-form input[type="password"] {
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }
  .task-login #rcmloginsubmit,
  .task-login #login-form input[type="submit"],
  .task-login #login-form button[type="submit"] {
    min-height: 44px !important;
    line-height: 42px !important;
  }
  .wefood-login-help {
    margin-top: 10px !important;
    padding: 9px 11px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  .wefood-after-login-note {
    margin-top: 7px !important;
    font-size: 11px !important;
  }
  .task-login #login-footer.wefood-login-footer {
    margin-top: 8px !important;
  }
  .wefood-back-link {
    min-height: 32px !important;
    padding: 0 12px !important;
  }
}

@media (max-width: 768px) {
  .task-login #layout-content.wefood-login-page {
    padding: 0 !important;
  }
  .wefood-login-brand {
    padding: 18px 18px 20px !important;
  }
  .wefood-brand-visual {
    min-height: 205px !important;
  }
  .wefood-logo-stage {
    width: 175px !important;
  }
  .wefood-login-card {
    padding: 28px 20px 34px !important;
  }
}


/* ================================================================
   R288.34 - real-device login polish
   - icon + field label on the same line
   - remove duplicate login headings/footer product text
   - center the left brand composition and keep a two-line visual gap
   - keep the slogan inside the brand card, never below the viewport
   ================================================================ */

.task-login #login-form > h1,
.task-login #login-form > h2,
.task-login #login-form > h3,
.task-login #login-form fieldset > legend {
  display: none !important;
}

.task-login #login-form tr.wefood-field-row {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px !important;
}
.task-login #login-form tr.wefood-field-row > td {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.task-login #login-form tr.wefood-field-row > td.wefood-field-original-title {
  display: none !important;
}
.task-login #login-form .wefood-field-heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  margin: 0 0 7px !important;
  color: var(--wf-text) !important;
}
.task-login #login-form .wefood-field-heading .input-group-prepend {
  display: inline-flex !important;
  margin: 0 !important;
}
.task-login #login-form .wefood-field-heading .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 1px solid #efd7b8 !important;
  border-radius: 9px !important;
  background: #fff4dd !important;
  color: var(--wf-orange-deep) !important;
}
.task-login #login-form .wefood-field-title {
  display: inline-block !important;
  color: var(--wf-text) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}
.task-login #login-form tr.wefood-field-row .input-group {
  display: block !important;
  width: 100% !important;
}
.task-login #login-form tr.wefood-field-row .input-group .form-control {
  width: 100% !important;
  border-radius: 12px !important;
}

.wefood-login-brand {
  justify-content: center !important;
}
.wefood-brand-visual {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 4px 0 0 !important;
}
.wefood-logo-stage {
  margin: 0 auto !important;
}
.wefood-brand-message {
  width: min(465px, 100%) !important;
  margin: 34px auto 0 !important;
}
.wefood-brand-slogan {
  margin: 14px 0 0 !important;
  padding-top: 11px !important;
  border-top: 1px dashed rgba(102,73,40,.22) !important;
  color: #8a602d !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.task-login #login-footer.wefood-login-footer > div,
.task-login #login-footer.wefood-login-footer .productname,
.task-login #login-footer.wefood-login-footer .version {
  display: none !important;
}

@media (min-width: 769px) and (max-height: 740px) {
  .wefood-login-brand {
    justify-content: center !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .wefood-logo-stage {
    width: min(225px, 62%) !important;
  }
  .wefood-brand-message {
    margin-top: 28px !important;
    padding: 13px 17px 12px !important;
  }
  .wefood-brand-slogan {
    margin-top: 9px !important;
    padding-top: 8px !important;
    font-size: 10px !important;
  }
  .task-login #login-form tr.wefood-field-row {
    margin-bottom: 10px !important;
  }
  .task-login #login-form .wefood-field-heading {
    min-height: 27px !important;
    margin-bottom: 5px !important;
  }
  .task-login #login-form .wefood-field-heading .input-group-text {
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 768px) {
  .wefood-brand-message {
    margin-top: 26px !important;
  }
  .wefood-brand-slogan {
    white-space: normal !important;
  }
}

/* ================================================================
   R288.34 - business mailbox labels + legacy footer cleanup
   ================================================================ */
.task-login #login-form.wefood-business-fields-ready tr.wefood-field-row > td.wefood-field-original-title,
.task-login #login-form.wefood-business-fields-ready tr.wefood-field-row > th.wefood-field-original-title,
.task-login #login-form.wefood-business-fields-ready tr.wefood-field-row > td.title,
.task-login #login-form.wefood-business-fields-ready tr.wefood-field-row > th.title,
.task-login #login-form.wefood-business-fields-ready tr.wefood-field-row > td:first-child:not(:last-child) {
  display: none !important;
}

.task-login #login-form .wefood-field-heading {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 0 7px !important;
}
.task-login #login-form .wefood-field-heading .input-group-prepend,
.task-login #login-form .wefood-field-heading .input-group-text,
.task-login #login-form .wefood-field-fallback-icon {
  flex: 0 0 auto !important;
}
.task-login #login-form .wefood-field-fallback-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid #efd7b8 !important;
  border-radius: 9px !important;
  background: #fff4dd !important;
  color: var(--wf-orange-deep) !important;
  font-size: 15px !important;
}
.task-login #login-form .wefood-field-title {
  display: inline-block !important;
  margin: 0 !important;
  color: var(--wf-text) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* Never allow legacy footer/slogan elements from older WEFOOD skins to sit outside the card. */
.task-login .wefood-brand-footer,
.task-login .productname,
.task-login .version {
  display: none !important;
}

@media (min-width: 769px) and (max-height: 740px) {
  .task-login #login-form .wefood-field-heading {
    min-height: 27px !important;
    margin-bottom: 5px !important;
  }
  .task-login #login-form .wefood-field-title {
    font-size: 12px !important;
  }
}

/* ================================================================
   R288.35 - native Roundcube field labels + delayed legacy cleanup
   Uses the server-rendered login table directly instead of moving
   Roundcube nodes into injected wrappers.
   ================================================================ */
.task-login #login-form.wefood-native-fields-ready table,
.task-login #login-form.wefood-native-fields-ready tbody {
  display: block !important;
  width: 100% !important;
}

.task-login #login-form tr.wefood-native-field-row {
  display: block !important;
  width: 100% !important;
  margin: 0 0 14px !important;
}

.task-login #login-form tr.wefood-native-field-row > td,
.task-login #login-form tr.wefood-native-field-row > th {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.task-login #login-form tr.wefood-native-field-row > .wefood-native-title-cell {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  margin: 0 0 7px !important;
  white-space: nowrap !important;
}

.task-login #login-form .wefood-native-field-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid #efd7b8 !important;
  border-radius: 9px !important;
  background: #fff4dd !important;
  color: var(--wf-orange-deep) !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.task-login #login-form .wefood-native-field-label {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--wf-text) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

.task-login #login-form .wefood-native-input-cell {
  display: block !important;
  width: 100% !important;
}

.task-login #login-form .wefood-native-input-cell .input-group,
.task-login #login-form .wefood-native-input-cell > .input-group {
  display: block !important;
  width: 100% !important;
}

.task-login #login-form .wefood-native-input {
  display: block !important;
  width: 100% !important;
  height: 49px !important;
  min-height: 49px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--wf-line-strong) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Hide obsolete injected wrappers from R288.32-R288.34 if browser kept DOM state. */
.task-login #login-form .wefood-field-heading,
.task-login #login-form .wefood-field-original-title {
  display: none !important;
}

/* Suppress known legacy footer/product nodes while runtime cleanup catches late inserts. */
.task-login #login-footer .productname,
.task-login #login-footer .version,
.task-login .wefood-brand-footer,
.task-login .wefood-legacy-slogan,
.task-login .wefood-legacy-mail-label {
  display: none !important;
}

@media (min-width: 769px) and (max-height: 740px) {
  .task-login #login-form tr.wefood-native-field-row {
    margin-bottom: 10px !important;
  }
  .task-login #login-form tr.wefood-native-field-row > .wefood-native-title-cell {
    min-height: 27px !important;
    margin-bottom: 5px !important;
  }
  .task-login #login-form .wefood-native-field-icon {
    flex-basis: 27px !important;
    width: 27px !important;
    height: 27px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }
  .task-login #login-form .wefood-native-field-label {
    font-size: 12px !important;
  }
}

@media (max-width: 520px) {
  .task-login #login-form .wefood-native-field-label {
    font-size: 12px !important;
  }
}

/* ================================================================
   R288.37 - remove stray bottom-left legacy footer text
   Keep the slogan only inside .wefood-brand-message.
   ================================================================ */
body.task-login > #footer,
body.task-login > footer,
body.task-login #layout > #footer,
body.task-login #layout > footer,
body.task-login #layout-footer,
body.task-login .footer:not(.wefood-login-footer),
body.task-login #login-footer:not(.wefood-login-footer),
body.task-login .wefood-brand-footer,
body.task-login .wefood-legacy-slogan,
body.task-login .wefood-legacy-mail-label {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* ================================================================
   R288.38 - remove standalone native icons inside login input rows
   Keep the branded label-row icons, but remove Roundcube's separate
   person/lock addon that sits beside the actual input box.
   ================================================================ */
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell .input-group-prepend,
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell > .input-group-prepend,
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell .input-group-text {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell .input-group {
  display: block !important;
  width: 100% !important;
}

.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell .form-control,
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell input[type="text"],
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell input[type="password"] {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

/* ================================================================
   R288.38 - mobile tap reliability
   Remove the standalone input addons and make the real Roundcube
   username/password controls the topmost interactive touch targets.
   ================================================================ */
.task-login #login-form tr.wefood-native-field-row,
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell,
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell .input-group {
  position: relative !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell {
  z-index: 20 !important;
}

.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell .input-group {
  z-index: 21 !important;
}

.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell .form-control,
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell input[type="text"],
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell input[type="email"],
.task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell input[type="password"] {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-tap-highlight-color: rgba(245, 122, 31, .16) !important;
}

.task-login #login-form .wefood-native-title-cell,
.task-login #login-form .wefood-native-field-icon,
.task-login #login-form .wefood-native-field-label {
  position: relative !important;
  z-index: 10 !important;
}

@media (max-width: 768px) {
  .task-login .wefood-login-card,
  .task-login .wefood-login-card-inner,
  .task-login #login-form,
  .task-login #login-form table,
  .task-login #login-form tbody {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }

  .task-login .wefood-login-card::before,
  .task-login .wefood-login-card::after,
  .task-login .wefood-login-brand::before,
  .task-login .wefood-login-brand::after,
  .task-login .wefood-food-sticker {
    pointer-events: none !important;
  }

  .task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell {
    min-height: 50px !important;
  }

  .task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell .form-control,
  .task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell input[type="text"],
  .task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell input[type="email"],
  .task-login #login-form tr.wefood-native-field-row .wefood-native-input-cell input[type="password"] {
    min-height: 50px !important;
    height: 50px !important;
    font-size: 16px !important;
    line-height: normal !important;
  }
}


/* ================================================================
   R288.39 - mobile native focus hardening
   Keep the accepted R288.38 visuals unchanged. Target the actual
   Roundcube username/password controls by ID and preserve native
   browser text-input behavior on Android/iOS.
   ================================================================ */
.task-login #rcmloginuser,
.task-login #rcmloginpwd {
  display: block !important;
  position: relative !important;
  z-index: 2147480000 !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  touch-action: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-tap-highlight-color: rgba(245, 122, 31, .18) !important;
}

.task-login #login-form .wefood-native-input-cell,
.task-login #login-form .wefood-native-input-cell .input-group {
  position: relative !important;
  z-index: 2147479000 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

.task-login #login-form .wefood-native-input-cell::before,
.task-login #login-form .wefood-native-input-cell::after,
.task-login #login-form .wefood-native-input-cell .input-group::before,
.task-login #login-form .wefood-native-input-cell .input-group::after {
  pointer-events: none !important;
}

@media (max-width: 768px), (pointer: coarse) {
  .task-login .wefood-login-card,
  .task-login .wefood-login-card-inner,
  .task-login #login-form {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
  }

  .task-login #rcmloginuser,
  .task-login #rcmloginpwd {
    min-height: 52px !important;
    height: 52px !important;
    font-size: 16px !important;
    line-height: normal !important;
    cursor: text !important;
  }
}


/* ================================================================
   R288.40 - mobile landing intro guard
   Visual design intentionally unchanged. Initial mobile page load
   stays at the top brand experience until the user interacts.
   ================================================================ */
@media (max-width: 768px), (pointer: coarse) {
  .task-login #layout-content.wefood-login-page {
    scroll-behavior: auto !important;
  }
}


/* R288.41 - inner UI polish: roomier brand header, clear task names, dark green display bars */

/* Give the WEFOOD logo breathing room from the very top of the inner app. */
#layout-menu .popover-header {
  min-height: 108px !important;
  padding-top: 22px !important;
  padding-bottom: 8px !important;
  box-sizing: border-box !important;
}
#layout-menu .popover-header:before {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* Rename the two main mail actions visually without touching Roundcube core/localization. */
#taskmenu a.compose .inner,
#taskmenu a.mail .inner {
  font-size: 0 !important;
  line-height: 1.2 !important;
}
#taskmenu a.compose .inner::after {
  content: "寫新信件";
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: inherit !important;
  white-space: nowrap !important;
}
#taskmenu a.mail .inner::after {
  content: "信件中心";
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: inherit !important;
  white-space: nowrap !important;
}

/* Use the same WEFOOD deep-green language for the primary display headers. */
#layout > #layout-sidebar > .header,
#layout > #layout-list > .header,
#layout > #layout-content > .header {
  background: linear-gradient(180deg, #173e33 0%, #244f3d 100%) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06) !important;
}
#layout > #layout-sidebar > .header .header-title,
#layout > #layout-list > .header .header-title,
#layout > #layout-content > .header .header-title,
#layout > #layout-sidebar > .header a,
#layout > #layout-list > .header a,
#layout > #layout-content > .header a,
#layout > #layout-sidebar > .header .button,
#layout > #layout-list > .header .button,
#layout > #layout-content > .header .button,
#layout > #layout-sidebar > .header .toolbar a,
#layout > #layout-list > .header .toolbar a,
#layout > #layout-content > .header .toolbar a,
#layout > #layout-sidebar > .header .inner,
#layout > #layout-list > .header .inner,
#layout > #layout-content > .header .inner {
  color: #fff !important;
}
#layout > #layout-sidebar > .header a::before,
#layout > #layout-list > .header a::before,
#layout > #layout-content > .header a::before,
#layout > #layout-sidebar > .header .button::before,
#layout > #layout-list > .header .button::before,
#layout > #layout-content > .header .button::before {
  color: #fff !important;
}
#layout > #layout-sidebar > .header a:hover,
#layout > #layout-list > .header a:hover,
#layout > #layout-content > .header a:hover {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
#layout > #layout-sidebar > .header .disabled,
#layout > #layout-list > .header .disabled,
#layout > #layout-content > .header .disabled {
  color: rgba(255,255,255,.58) !important;
}

/* Dialog headers: make the title and controls unmistakably white on green. */
.ui-dialog .ui-dialog-titlebar,
.ui-dialog-titlebar {
  background: linear-gradient(180deg, #173e33 0%, #244f3d 100%) !important;
  border-color: #173e33 !important;
  color: #fff !important;
}
.ui-dialog .ui-dialog-title,
.ui-dialog-titlebar .ui-dialog-title,
.ui-dialog-titlebar .ui-dialog-titlebar-close,
.ui-dialog-titlebar .ui-dialog-titlebar-close::before {
  color: #fff !important;
}

/* Keep top bars readable on touch layouts too. */
@media (max-width: 1024px) {
  #layout-menu .popover-header {
    min-height: 100px !important;
    padding-top: 18px !important;
    padding-bottom: 7px !important;
  }
}


/* ================================================================
   R288.43 - blue inner UI correction
   - Keep the accepted login page unchanged.
   - Remove the overflowing brand text below the inner logo.
   - Move the inner WEFOOD logo down with real breathing room.
   - Rename compose/mail using runtime DOM text, not pseudo text.
   - Unify inner navigation/header/dialog chrome to WEFOOD blue.
   ================================================================ */

:root {
  --wf-inner-blue: #173f6d;
  --wf-inner-blue-dark: #123458;
  --wf-inner-blue-light: #245781;
  --wf-inner-blue-line: rgba(255,255,255,.12);
}

/* Inner app only: make the whole navigation chrome use the sidebar blue. */
body:not(.task-login) #layout-menu,
body:not(.task-login) #taskmenu,
body:not(.task-login) #taskmenu .special-buttons {
  background: linear-gradient(180deg, var(--wf-inner-blue-dark) 0%, var(--wf-inner-blue) 48%, var(--wf-inner-blue-light) 100%) !important;
}

body:not(.task-login) #layout-menu .popover-header {
  height: 122px !important;
  min-height: 122px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: var(--wf-inner-blue-dark) !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

/* Move the logo visibly down from the top edge. */
body:not(.task-login) #layout-menu .popover-header:before {
  position: relative !important;
  top: 18px !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 auto !important;
  background-color: #fff !important;
}

/* The old WEFOOD Company Mail pseudo label was colliding with the first menu item. */
body:not(.task-login) #layout-menu .popover-header:after {
  content: none !important;
  display: none !important;
}

/* R288.41 used pseudo labels. Disable them completely; R288.43 writes the
   real Roundcube .inner text at runtime, so there is only one label. */
body:not(.task-login) #taskmenu a.compose .inner,
body:not(.task-login) #taskmenu a.mail .inner {
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: inherit !important;
  white-space: nowrap !important;
}
body:not(.task-login) #taskmenu a.compose .inner::after,
body:not(.task-login) #taskmenu a.mail .inner::after {
  content: none !important;
  display: none !important;
}

/* Keep all task text/icons crisp on the blue rail. */
body:not(.task-login) #taskmenu a,
body:not(.task-login) #taskmenu a .inner,
body:not(.task-login) #taskmenu a::before {
  color: #fff !important;
}
body:not(.task-login) #taskmenu a:hover {
  background: rgba(255,255,255,.10) !important;
}
body:not(.task-login) #taskmenu a.selected:not(.compose) {
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 3px 0 0 #f39a3e !important;
}
body:not(.task-login) #taskmenu a.compose,
body:not(.task-login) #taskmenu a.compose.selected {
  background: linear-gradient(135deg, #e58a38 0%, #d66d25 100%) !important;
  color: #fff !important;
}

/* Main display/header bars: same blue as the left function rail. */
body:not(.task-login) #layout > #layout-sidebar > .header,
body:not(.task-login) #layout > #layout-list > .header,
body:not(.task-login) #layout > #layout-content > .header {
  background: linear-gradient(180deg, var(--wf-inner-blue-dark) 0%, var(--wf-inner-blue) 100%) !important;
  border-color: var(--wf-inner-blue-line) !important;
  color: #fff !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07) !important;
}

body:not(.task-login) #layout > #layout-sidebar > .header .header-title,
body:not(.task-login) #layout > #layout-list > .header .header-title,
body:not(.task-login) #layout > #layout-content > .header .header-title,
body:not(.task-login) #layout > #layout-sidebar > .header a,
body:not(.task-login) #layout > #layout-list > .header a,
body:not(.task-login) #layout > #layout-content > .header a,
body:not(.task-login) #layout > #layout-sidebar > .header .button,
body:not(.task-login) #layout > #layout-list > .header .button,
body:not(.task-login) #layout > #layout-content > .header .button,
body:not(.task-login) #layout > #layout-sidebar > .header .toolbar a,
body:not(.task-login) #layout > #layout-list > .header .toolbar a,
body:not(.task-login) #layout > #layout-content > .header .toolbar a,
body:not(.task-login) #layout > #layout-sidebar > .header .inner,
body:not(.task-login) #layout > #layout-list > .header .inner,
body:not(.task-login) #layout > #layout-content > .header .inner,
body:not(.task-login) #layout > #layout-sidebar > .header a::before,
body:not(.task-login) #layout > #layout-list > .header a::before,
body:not(.task-login) #layout > #layout-content > .header a::before,
body:not(.task-login) #layout > #layout-sidebar > .header .button::before,
body:not(.task-login) #layout > #layout-list > .header .button::before,
body:not(.task-login) #layout > #layout-content > .header .button::before {
  color: #fff !important;
}

body:not(.task-login) #layout > #layout-sidebar > .header a:hover,
body:not(.task-login) #layout > #layout-list > .header a:hover,
body:not(.task-login) #layout > #layout-content > .header a:hover {
  background: rgba(255,255,255,.11) !important;
  color: #fff !important;
}

/* Dialog title bars follow the same blue instead of the previous green. */
body:not(.task-login) .ui-dialog .ui-dialog-titlebar,
body:not(.task-login) .ui-dialog-titlebar {
  background: linear-gradient(180deg, var(--wf-inner-blue-dark) 0%, var(--wf-inner-blue) 100%) !important;
  border-color: var(--wf-inner-blue-dark) !important;
  color: #fff !important;
}
body:not(.task-login) .ui-dialog .ui-dialog-title,
body:not(.task-login) .ui-dialog-titlebar .ui-dialog-title,
body:not(.task-login) .ui-dialog-titlebar .ui-dialog-titlebar-close,
body:not(.task-login) .ui-dialog-titlebar .ui-dialog-titlebar-close::before {
  color: #fff !important;
}

/* Keep readable white content areas; only the app chrome is blue. */
body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-list,
body:not(.task-login) #layout-content {
  background-color: #fff !important;
}

@media (max-width: 1024px) {
  body:not(.task-login) #layout-menu .popover-header {
    height: 112px !important;
    min-height: 112px !important;
  }
  body:not(.task-login) #layout-menu .popover-header:before {
    top: 15px !important;
    width: 54px !important;
    height: 54px !important;
  }
}

/* ================================================================
   R288.45 - left task menu font-size stability fix
   - Desktop target matches Elastic/Contacts visual size (~12.6px => 13px).
   - Phone target matches Elastic touch menu size (1.2rem).
   - High-specificity rules defeat legacy 11px overrides.
   - Disable mobile text autosizing and label font transitions.
   ================================================================ */
body:not(.task-login) #layout-menu #taskmenu,
body:not(.task-login) #layout-menu #taskmenu .special-buttons {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

html body:not(.task-login) #layout-menu #taskmenu a .inner,
html body:not(.task-login) #layout-menu #taskmenu .special-buttons a .inner,
html body:not(.task-login) #layout-menu #taskmenu a.compose .inner,
html body:not(.task-login) #layout-menu #taskmenu a.mail .inner,
html body:not(.task-login) #layout-menu #taskmenu a.contacts .inner,
html body:not(.task-login) #layout-menu #taskmenu a.settings .inner,
html body:not(.task-login) #layout-menu #taskmenu a.about .inner,
html body:not(.task-login) #layout-menu #taskmenu a.logout .inner {
  font-size: 13px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  transition: none !important;
  animation: none !important;
}

@media screen and (max-width: 480px) {
  html body:not(.task-login) #layout-menu #taskmenu a .inner,
  html body:not(.task-login) #layout-menu #taskmenu .special-buttons a .inner,
  html body:not(.task-login) #layout-menu #taskmenu a.compose .inner,
  html body:not(.task-login) #layout-menu #taskmenu a.mail .inner,
  html body:not(.task-login) #layout-menu #taskmenu a.contacts .inner,
  html body:not(.task-login) #layout-menu #taskmenu a.settings .inner,
  html body:not(.task-login) #layout-menu #taskmenu a.about .inner,
  html body:not(.task-login) #layout-menu #taskmenu a.logout .inner {
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
  }
}

/* ================================================================
   R288.48 - WEFOOD Mail password settings
   - Uses Roundcube's bundled password plugin with a WEFOOD MailEnable driver.
   - Keeps the accepted R288.45 login/home and blue inner UI unchanged.
   - Branded settings page, touch-friendly fields, clear password separation.
   ================================================================ */
body.wefood-password-page #prefs-title {
  background: linear-gradient(180deg, var(--wf-inner-blue-dark) 0%, var(--wf-inner-blue) 100%) !important;
  color: #fff !important;
  border-color: var(--wf-inner-blue-dark) !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

body.wefood-password-page .wefood-password-intro {
  margin: 18px 18px 8px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(23,63,109,.16) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #fffaf3 0%, #fff 58%, #f2f7fc 100%) !important;
  box-shadow: 0 10px 28px rgba(18,52,88,.08) !important;
  color: #27384a !important;
}

body.wefood-password-page .wefood-password-intro-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(229,138,56,.12) !important;
  color: #9a531d !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

body.wefood-password-page .wefood-password-intro h2 {
  margin: 10px 0 6px !important;
  color: #173f6d !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

body.wefood-password-page .wefood-password-intro p {
  margin: 0 !important;
  color: #47596a !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

body.wefood-password-page .wefood-password-intro .wefood-password-intro-note {
  margin-top: 8px !important;
  color: #6b7785 !important;
  font-size: 13px !important;
}

body.wefood-password-page #password-form {
  padding: 8px 18px 4px !important;
}

body.wefood-password-page #password-form table.propform {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 !important;
}

body.wefood-password-page #password-form table.propform td.title,
body.wefood-password-page #password-form table.propform th.title {
  width: 210px !important;
  padding: 11px 18px 11px 0 !important;
  color: #173f6d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

body.wefood-password-page #password-form table.propform td:not(.title),
body.wefood-password-page #password-form table.propform th:not(.title) {
  padding: 8px 0 !important;
}

body.wefood-password-page #password-form input[type="password"] {
  width: min(100%, 460px) !important;
  min-height: 46px !important;
  padding: 10px 13px !important;
  border: 1px solid #b7c5d5 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #172433 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  box-shadow: inset 0 1px 2px rgba(18,52,88,.04) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

body.wefood-password-page #password-form input[type="password"]:focus {
  border-color: #245781 !important;
  box-shadow: 0 0 0 3px rgba(36,87,129,.14) !important;
  outline: 0 !important;
}

body.wefood-password-page #ruleslist {
  max-width: 760px !important;
  margin: 10px 18px !important;
  padding: 12px 16px 12px 32px !important;
  border-radius: 10px !important;
  background: #f5f8fb !important;
  color: #526273 !important;
  font-size: 13px !important;
}

body.wefood-password-page .formbuttons.footerleft {
  padding: 8px 18px 18px !important;
}

body.wefood-password-page .formbuttons .button.mainaction,
body.wefood-password-page .formbuttons button.mainaction,
body.wefood-password-page .formbuttons input.mainaction {
  min-height: 44px !important;
  min-width: 176px !important;
  padding: 9px 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #ee963f 0%, #d96f28 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 7px 18px rgba(217,111,40,.20) !important;
}

body.wefood-password-page .formbuttons .button.mainaction:hover,
body.wefood-password-page .formbuttons button.mainaction:hover,
body.wefood-password-page .formbuttons input.mainaction:hover {
  filter: brightness(.98) !important;
}

/* Settings action label stays readable in both desktop and touch layouts. */
body:not(.task-login) a[href*="_action=plugin.password"] .inner,
body:not(.task-login) a.password[href*="plugin.password"] .inner {
  font-weight: 700 !important;
}

@media screen and (max-width: 768px) {
  body.wefood-password-page .wefood-password-intro {
    margin: 12px 12px 6px !important;
    padding: 15px 16px !important;
    border-radius: 14px !important;
  }

  body.wefood-password-page .wefood-password-intro h2 {
    font-size: 18px !important;
  }

  body.wefood-password-page #password-form {
    padding: 6px 12px 2px !important;
  }

  body.wefood-password-page #password-form table.propform,
  body.wefood-password-page #password-form table.propform tbody,
  body.wefood-password-page #password-form table.propform tr,
  body.wefood-password-page #password-form table.propform td,
  body.wefood-password-page #password-form table.propform th {
    display: block !important;
    width: 100% !important;
  }

  body.wefood-password-page #password-form table.propform tr {
    margin: 0 0 13px !important;
  }

  body.wefood-password-page #password-form table.propform td.title,
  body.wefood-password-page #password-form table.propform th.title {
    width: 100% !important;
    padding: 0 0 7px !important;
    white-space: normal !important;
  }

  body.wefood-password-page #password-form table.propform td:not(.title),
  body.wefood-password-page #password-form table.propform th:not(.title) {
    padding: 0 !important;
  }

  body.wefood-password-page #password-form input[type="password"] {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    touch-action: manipulation !important;
  }

  body.wefood-password-page #ruleslist {
    margin: 8px 12px !important;
  }

  body.wefood-password-page .formbuttons.footerleft {
    padding: 8px 12px 16px !important;
  }

  body.wefood-password-page .formbuttons .button.mainaction,
  body.wefood-password-page .formbuttons button.mainaction,
  body.wefood-password-page .formbuttons input.mainaction {
    width: 100% !important;
  }
}


/* R288.54 - native login submit button interaction hardening */
.task-login #login-form .formbuttons {
  position: relative !important;
  z-index: 80 !important;
  pointer-events: auto !important;
}
.task-login #rcmloginsubmit,
.task-login #login-form input[type="submit"],
.task-login #login-form button[type="submit"] {
  position: relative !important;
  z-index: 81 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
.task-login #login-form .formbuttons::before,
.task-login #login-form .formbuttons::after,
.task-login #rcmloginsubmit::before,
.task-login #rcmloginsubmit::after {
  pointer-events: none !important;
}

/* BEGIN WEFOOD R28856 PASSWORD VISIBILITY MATCH STYLE */
/* WEFOOD_R28856_PASSWORD_VISIBILITY_MATCH_STYLE */
body.wefood-password-page .wefood-password-field-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
}

body.wefood-password-page .wefood-password-field-wrap input[type="password"],
body.wefood-password-page .wefood-password-field-wrap input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 92px !important;
  box-sizing: border-box !important;
}

body.wefood-password-page .wefood-password-visibility-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  min-width: 72px !important;
  height: 30px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(36,87,129,.22) !important;
  border-radius: 8px !important;
  background: #f3f8fd !important;
  color: #173f6d !important;
  font-size: 12px !important;
  line-height: 28px !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body.wefood-password-page .wefood-password-visibility-toggle:hover,
body.wefood-password-page .wefood-password-visibility-toggle:focus-visible {
  border-color: #245781 !important;
  background: #e9f2fb !important;
  color: #123458 !important;
  outline: none !important;
}

body.wefood-password-page .wefood-password-visibility-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(36,87,129,.16) !important;
}

body.wefood-password-page .wefood-password-match-status {
  display: block !important;
  max-width: 560px !important;
  margin-top: 7px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

body.wefood-password-page .wefood-password-match-status[hidden] {
  display: none !important;
}

body.wefood-password-page .wefood-password-match-status.is-neutral {
  background: #f4f7fa !important;
  color: #68798a !important;
}

body.wefood-password-page .wefood-password-match-status.is-match {
  border: 1px solid rgba(45,128,84,.20) !important;
  background: #f2fbf6 !important;
  color: #245b3c !important;
}

body.wefood-password-page .wefood-password-match-status.is-mismatch {
  border: 1px solid rgba(190,58,58,.18) !important;
  background: #fff4f4 !important;
  color: #a93232 !important;
}

body.wefood-password-page #confpasswd[aria-invalid="true"] {
  border-color: #c94c4c !important;
  box-shadow: 0 0 0 2px rgba(201,76,76,.10) !important;
}

@media screen and (max-width: 768px) {
  body.wefood-password-page .wefood-password-field-wrap,
  body.wefood-password-page .wefood-password-match-status {
    max-width: none !important;
  }

  body.wefood-password-page .wefood-password-field-wrap input[type="password"],
  body.wefood-password-page .wefood-password-field-wrap input[type="text"] {
    padding-right: 86px !important;
  }

  body.wefood-password-page .wefood-password-visibility-toggle {
    right: 6px !important;
    min-width: 68px !important;
    height: 32px !important;
    font-size: 12px !important;
    line-height: 30px !important;
  }
}
/* END WEFOOD R28856 PASSWORD VISIBILITY MATCH STYLE */

/* BEGIN WEFOOD R28857 PASSWORD SYNC REMINDER STYLE */
/* WEFOOD_R28857_PASSWORD_SYNC_REMINDER_STYLE */
#wefood-password-delay-note.wefood-password-delay-note {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(23, 63, 109, .18);
  border-radius: 12px;
  background: #eef4fb;
  color: #173f6d;
  box-shadow: 0 4px 14px rgba(18, 52, 88, .06);
}
#wefood-password-delay-note .wefood-password-delay-title {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
}
#wefood-password-delay-note .wefood-password-delay-copy {
  display: block;
  font-size: .92rem;
  line-height: 1.65;
  color: #365d82;
}
#wefood-password-delay-note.is-syncing {
  border-color: #e9a23b;
  background: #fff8ea;
  color: #8b5a12;
}
#wefood-password-delay-note.is-syncing .wefood-password-delay-copy {
  color: #765522;
}
#wefood-password-delay-note.is-ready {
  border-color: #6aa681;
  background: #eef8f1;
  color: #25633e;
}
#wefood-password-delay-note.is-ready .wefood-password-delay-copy {
  color: #3c7250;
}
#password-form[aria-busy="true"] {
  opacity: .82;
}
#password-form .wefood-password-sync-button,
#password-form .wefood-password-sync-button:disabled {
  cursor: wait !important;
  opacity: .75 !important;
}
@media (max-width: 600px) {
  #wefood-password-delay-note.wefood-password-delay-note {
    margin-bottom: .85rem;
    padding: .8rem .85rem;
  }
  #wefood-password-delay-note .wefood-password-delay-title {
    font-size: .97rem;
  }
  #wefood-password-delay-note .wefood-password-delay-copy {
    font-size: .9rem;
  }
}
/* END WEFOOD R28857 PASSWORD SYNC REMINDER STYLE */