/* =========================================================================
   5yMail — Menu restyle (left sidebar + top services nav)
   Load this AFTER /stylesheet/Site.css and /stylesheet/CSS_G__n__rique.css
   to override only the menu styling.

   Both menus share an IDENTICAL link visual (color, padding, font,
   border-radius, hover, active). Container layouts differ:
     - #left           : vertical stacked card (sidebar)
     - .liensinline    : horizontal flex row (top nav strip)

   Original brand colors preserved:
     brand blue:    #0c54d7
     hover orange:  #ff6600
   ========================================================================= */

:root {
  --m-brand:        #0c54d7;
  --m-brand-soft:   #e8f0ff;
  --m-hover:        #ff6600;
  --m-hover-soft:   #fff4e6;
  --m-text-mute:    #6b7280;
  --m-border:       #e5e7eb;
  --m-bg:           #ffffff;
  --m-bg-alt:       #f7f8fb;
  --m-radius:       8px;
  --m-shadow:       0 1px 2px rgba(15, 23, 42, .04);
}

/* =========================================================================
   Page layout overrides (was 1100px / 860px in Site.css)
   ========================================================================= */

#wrapper { width: 1165px; }
#content { width: 920px; }

/* =========================================================================
   Containers
   ========================================================================= */

/* Left sidebar */
#left {
  width: 210px;
  padding: 12px;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: 12px;
  box-shadow: var(--m-shadow);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* Section headings ("Member Suite", "User Information", "FAQs") */
#left h2 {
  margin: 14px 4px 6px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--m-border);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-text-mute);
}
#left h2:first-of-type { margin-top: 4px !important; }
#left h2 a,
#left h2 a:link,
#left h2 a:visited {
  color: var(--m-text-mute);
  text-decoration: none;
}
#left h2 a:hover,
#left h2 a:active { color: var(--m-brand); }

#left ul.liens {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
#left ul.liens li {
  margin: 0;
  padding: 0;
  background: none;
  list-style: none;
}

/* Top services nav */
#content .liensinline,
#content ul.liensinline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
  margin: 0 0 16px;
  padding: 8px;
  list-style: none;
  text-align: left;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  box-shadow: var(--m-shadow);
}
#content .liensinline li {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
}
#content .liensinline .end { border: 0; }
#content .liensinline li a { white-space: nowrap; }

/* =========================================================================
   Unified link style — used by BOTH left sidebar and top nav.
   Identical at the link level so the two menus visually match.
   ========================================================================= */

#left ul.liens li a,
#left ul.liens li a:link,
#left ul.liens li a:visited,
#content .liensinline li a,
#content .liensinline li a:link,
#content .liensinline li a:visited {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--m-brand);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--m-radius);
  text-decoration: none;
  transition: background-color .15s ease,
              color .15s ease,
              border-color .15s ease;
}

#left ul.liens li a:hover,
#left ul.liens li a:active,
#content .liensinline li a:hover,
#content .liensinline li a:active,
#left ul.liens li a.currentpage,
#left .currentpage,
#content .liensinline .currentpage {
  background: var(--m-hover-soft);
  color: var(--m-hover);
  border-color: var(--m-hover);
  text-decoration: none;
}

/* Current page often renders as <li class="currentpage"> with no <a>
   inside (the CMS drops the link for the active page). Give those
   <li>s the same button shape the <a> links get from the base rule —
   but no explicit border (matches the old version's look). */
#left ul.liens li.currentpage,
#content .liensinline li.currentpage {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.4;
  background: var(--m-hover-soft);
  color: var(--m-hover);
  border-radius: var(--m-radius);
  box-sizing: border-box;
}
/* Left sidebar — full-row block, matches <a> link layout */
#left ul.liens li.currentpage {
  display: flex;
  align-items: center;
  margin: 2px 0;
}
/* Top nav — inline-flex, matches <a> link layout */
#content .liensinline li.currentpage {
  display: inline-flex;
  align-items: center;
}
/* Hide the numeric/locale prefix inside the current-page <li> too */
#left ul.liens li.currentpage dfn,
#content .liensinline li.currentpage dfn { display: none; }

/* Left sidebar links stretch to fill the vertical column */
#left ul.liens li a,
#left ul.liens li a:link,
#left ul.liens li a:visited {
  display: flex;
  margin: 2px 0;
}

/* Hide numeric prefixes (4.1:, 3.1:) in BOTH menus for cleaner labels */
#left ul.liens li a dfn,
#content .liensinline li a dfn { display: none; }

/* =========================================================================
   Sidebar extras (CTA + promo blocks)
   ========================================================================= */

#left > a[href*="invia-e-mail-in-blocco"] {
  display: block;
  margin: 10px 0;
  padding: 9px 12px;
  text-align: center;
  background: var(--m-brand);
  color: #fff !important;
  border-radius: var(--m-radius);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(12, 84, 215, .25);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#left > a[href*="invia-e-mail-in-blocco"]:hover {
  background: var(--m-hover);
  box-shadow: 0 2px 8px rgba(255, 102, 0, .35);
  transform: translateY(-1px);
  text-decoration: none;
}

#left .pub {
  width: auto;
  margin: 12px 0;
  padding: 8px;
  background: var(--m-bg-alt);
  border-radius: var(--m-radius);
  text-align: center;
  overflow: hidden;
}
#left .pub img { max-width: 100%; height: auto; margin: 0 auto; }
#left > a img { max-width: 100%; height: auto; }

/* =========================================================================
   Form controls — text inputs, selects, textareas, checkboxes,
   radios, file inputs, submit buttons, fieldsets, advanced panel
   ---------------------------------------------------------------
   Selectors mirror Site.css specificity so source order (this file
   loaded AFTER Site.css) is enough to win. Background-images and
   text-indent hacks from the original are explicitly killed.
   ========================================================================= */

/* ----- Text inputs / selects / textareas (base look) ----- */
#content #page form input,
#content #page form select,
#content #page form textarea,
#content #page form .slider-wrap input[type="text"] {
  color: var(--m-brand);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background-color: var(--m-bg);
  background-image: none;        /* drop fleche-left.png arrow */
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 5px 10px;             /* tighter */
  height: auto;                  /* override the 25px height */
  min-height: 30px;              /* shorter */
  box-shadow: var(--m-shadow);
  outline: none;
  transition: border-color .15s ease,
              box-shadow .15s ease,
              background-color .15s ease;
}

/* Force both main columns to the same width so the two form sides
   line up. (Original CSS gave inputFieldDiv1=400px and inputFieldDiv2=auto.) */
.inputFieldDiv1,
.inputFieldDiv2 {
  width: 430px !important;
  box-sizing: border-box;
}

/* Widen the slider-wrap fieldset to accommodate both columns. */
#content #page form .slider-wrap fieldset {
  width: 880px !important;
}

/* Row containers — flex so the label sits vertically centered with its
   input. Scoped to ONLY the two main form columns. nowrap keeps the row
   stable; tooltip popups float absolutely so they don't disturb layout. */
.inputFieldDiv1 > div,
.inputFieldDiv2 > div {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  height: auto !important;
  margin-bottom: 8px;
  min-width: 0;
  position: relative;          /* anchor for absolutely-positioned popups */
  z-index: 1;
}

/* Lift the hovered row above its siblings so its popup (which lives in
   the row's stacking context) can be seen instead of being covered by
   the next row down. */
.inputFieldDiv1 > div:hover,
.inputFieldDiv2 > div:hover {
  z-index: 200;
}

/* Labels in the main two columns — drop float, fixed width so all
   inputs line up under each other.
   !important is required: Site.css's `#content #page form label`
   selector (specificity 0,2,0,2) outranks ours otherwise — and its
   `float: left` was making the floated label overlap the row,
   sitting on top of the question-mark icon and stealing its hover. */
.inputFieldDiv1 > div > label,
.inputFieldDiv2 > div > label {
  float: none !important;
  width: 140px !important;            /* fits longest label "Recipient Email(s) :*" without wrapping */
  margin: 0 !important;
  padding-right: 6px !important;
  text-align: right !important;
  flex-shrink: 0;
  line-height: 1.4;
  white-space: nowrap;
}

/* All text inputs / selects share the same width: 240px fits cleanly
   inside the 430px column alongside a 140px label and the help icon.
   SCOPED to .slider-wrap (homepage compose form) — other pages keep
   Site.css's default 270px width and don't get forced to 42px height. */
#content #page form .slider-wrap input[type="text"],
#content #page form .slider-wrap input[type="email"],
#content #page form .slider-wrap input[type="password"],
#content #page form .slider-wrap input[type="number"],
#content #page form .slider-wrap select {
  width: 240px !important;
  max-width: 100%;
  flex: 0 0 240px;
  min-width: 0;
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
}

/* Help icons (?) and the gear sender-setup link sit beside the input,
   vertically centered in the row, never pushed onto a new line. */
.inputFieldDiv1 > div > img,
.inputFieldDiv2 > div > img,
.inputFieldDiv1 > div > a,
.inputFieldDiv2 > div > a {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 2px;
}
.inputFieldDiv1 > div > img,
.inputFieldDiv2 > div > img {
  width: 16px;
  height: 16px;
  cursor: pointer;
  display: block;          /* drop default inline baseline so vertical center is exact */
}
/* Gear icon is wrapped in <a> — center its inner image too */
.inputFieldDiv1 > div > a > img,
.inputFieldDiv2 > div > a > img {
  display: block;
  vertical-align: middle;
}

/* Focus ring */
#content #page form input:focus,
#content #page form select:focus,
#content #page form textarea:focus {
  border-color: var(--m-brand);
  box-shadow: 0 0 0 3px rgba(12, 84, 215, .18);
  background-color: var(--m-bg);
}

/* Hover (subtle) — override the orange border original */
#content #page form input:hover,
#content #page form select:hover,
#content #page form textarea:hover {
  border-color: #b7c8e3;
}

/* Disabled */
#content #page form input:disabled,
#content #page form select:disabled,
#content #page form textarea:disabled,
#content #page form .slider-wrap input:disabled {
  background-color: var(--m-bg-alt);
  color: var(--m-text-mute);
  opacity: .9;
  cursor: not-allowed;
  box-shadow: none;
}

/* Required asterisk */
#content #page form .required {
  color: #dc2626;
  font-weight: 700;
  margin-left: 2px;
}

/* ----- Help tooltip popups (#dmail, #obj, #serverloc, etc.) -----
   Always rendered, hidden via opacity/visibility, shown on icon hover.
   No display-toggling = no dependency on the original jQuery .animate(). */
#dmail, #dmailcc, #dmailbcc, #obj, #nname, #realmail,
#EmailFrom, #EmailReplyEmail, #EmailReplyName, #serverloc {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, visibility .12s ease;

  position: absolute !important;
  bottom: calc(100% + 6px) !important;     /* float above the row */
  top: auto !important;
  left: 116px !important;                  /* label (110) + gap (6) */
  right: 0 !important;
  width: auto !important;
  height: auto !important;                 /* neutralize jQuery's inline height: 0 */
  overflow: visible !important;            /* neutralize jQuery's inline overflow: hidden */
  margin: 0 !important;                    /* kill Site.css negative margin-top */
  padding: 8px 12px !important;
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 0 !important;
  border-radius: var(--m-radius) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .25) !important;
  z-index: 100 !important;
  max-width: 380px;
}

/* Show whenever the row's icon (or its <a> wrapper) is hovered.
   !important is needed because the base hide-rule above uses ID
   selectors (specificity 0,1,0,0) which would otherwise win. */
.inputFieldDiv1 > div > img:hover ~ div,
.inputFieldDiv1 > div > a:hover   ~ div,
.inputFieldDiv2 > div > img:hover ~ div,
.inputFieldDiv2 > div > a:hover   ~ div {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Downward caret hint */
#dmail::after, #dmailcc::after, #dmailbcc::after, #obj::after,
#nname::after, #realmail::after, #EmailFrom::after,
#EmailReplyEmail::after, #EmailReplyName::after, #serverloc::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 16px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #1e293b;
}
#dmail p, #dmailcc p, #dmailbcc p, #obj p, #nname p, #realmail p,
#EmailFrom p, #EmailReplyEmail p, #EmailReplyName p, #serverloc p {
  margin: 0;
  color: inherit;
}
#dmail a, #dmailcc a, #dmailbcc a, #obj a, #nname a, #realmail a,
#EmailFrom a, #EmailReplyEmail a, #EmailReplyName a, #serverloc a {
  color: #a5b4fc;
}

/* ----- Select: custom dropdown arrow ----- */
#content #page form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 30px;
  cursor: pointer;
}

/* ----- File input ----- */
#content #page form input[type="file"] {
  padding: 6px 8px;
  min-height: 0;
  font-weight: 500;
  cursor: pointer;
  background-image: none;
}
#content #page form input[type="file"]::file-selector-button,
#content #page form input[type="file"]::-webkit-file-upload-button {
  margin-right: 10px;
  padding: 6px 14px;
  background: var(--m-brand);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
#content #page form input[type="file"]::file-selector-button:hover,
#content #page form input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--m-hover);
}

/* ----- Checkboxes and radios — native, accent-colored ----- */
#content #page form input[type="checkbox"],
#content #page form input[type="radio"],
#content #page form div.checkbox input,
#content #page form .slider-wrap div.checkbox input {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  width: 18px !important;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  vertical-align: middle;
  accent-color: var(--m-brand);
  cursor: pointer;
  float: none;
}

/* Checkbox / radio row container. Flex column — grows reliably with content.
   SCOPED to .slider-wrap (homepage) so other pages keep their original
   checkbox styling — they may have different HTML and our gray-pill
   layout could look wrong outside the homepage compose form. */
#content #page form .slider-wrap div.checkbox {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 8px 0 !important;
  padding: 12px 14px 12px 42px !important;
  background-color: var(--m-bg-alt) !important;
  background-image: none !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
}
#content #page form .slider-wrap div.checkbox::after {
  content: "";
  display: block;
  clear: both;
}

/* Absolute-position any checkbox/radio inside the row — works whether
   it's a direct child or nested inside the <label>.
   SCOPED to .slider-wrap (homepage). */
#content #page form .slider-wrap div.checkbox input[type="checkbox"],
#content #page form .slider-wrap div.checkbox input[type="radio"] {
  position: absolute;
  top: 13px;
  left: 14px;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  flex: none;
  float: none;
  vertical-align: top;
}

/* Label — full row width, naturally-growing height, normal text wrapping.
   SCOPED to .slider-wrap (homepage compose form). */
#content #page form .slider-wrap div.checkbox label,
#content #page form #advanceSetting div.checkbox label {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--m-text-mute);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left !important;
  vertical-align: top !important;
  float: none !important;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: visible !important;
  box-sizing: border-box;
}

/* ----- Labels ----- */
#content #page form label {
  color: var(--m-brand);
  font-weight: 600;
  font-size: 13px;
  padding-right: 8px;
}

/* ----- Fieldset / legend (scoped to homepage compose form) ----- */
#content #page form .slider-wrap fieldset {
  padding: 16px;
  margin-bottom: 10px;
  background: transparent;
  border: 1px solid var(--m-border);
  border-radius: 10px;
}
#content #page form .slider-wrap fieldset legend {
  width: auto;
  padding: 0 8px;
  color: var(--m-text-mute);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  background: transparent;
}

/* ----- "Advanced Settings" toggle button (the <button> tag) ----- */
button[onclick*="ShowAdvancedSetting"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px !important;        /* override inline padding:5px */
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 600;
  color: var(--m-brand);
  background: var(--m-bg);
  border: 1px solid var(--m-brand);
  border-radius: var(--m-radius);
  cursor: pointer;
  box-shadow: var(--m-shadow);
  transition: background-color .15s ease,
              color .15s ease,
              border-color .15s ease,
              box-shadow .15s ease,
              transform .15s ease;
}
button[onclick*="ShowAdvancedSetting"]:hover,
button[onclick*="ShowAdvancedSetting"]:focus,
button[onclick*="ShowAdvancedSetting"]:active {
  background: var(--m-brand-soft);
  border-color: var(--m-brand);
  box-shadow: 0 4px 12px rgba(12, 84, 215, .18);
  outline: none;
  transform: none !important;
}
button[onclick*="ShowAdvancedSetting"]::before {
  content: "⚙";
  font-size: 20px;
  line-height: 1;
}

/* ----- Advanced settings panel container ----- */
#advanceSetting {
  margin: 10px 0 20px;
  padding: 18px;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: 12px;
  box-shadow: var(--m-shadow);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;          /* clip any inner overflow so it can't trigger horizontal scroll */
}

/* The inline style="width:720px" on the Custom-SMTP fieldset and
   style="width:200px" on its legend cause the form width to shift when
   the panel opens/closes. Force them to fit the panel.
   Higher-specificity selector below — needed to beat my own broad
   `#content #page form .slider-wrap fieldset { width: 880px }` rule. */
#content #page form .slider-wrap #advanceSetting fieldset {
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}
#content #page form .slider-wrap #advanceSetting fieldset legend {
  width: auto !important;
}

/* `.ldv` floats the wide SMTP column left. With our flex layout that
   creates an unstable horizontal flow that shifts when the panel opens.
   Reset to block so each SMTP row stacks predictably. */
#advanceSetting .ldv {
  float: none !important;
  width: auto !important;
}

/* Smaller text inputs / selects ONLY inside Advanced Settings.
   Excludes the X-Mailer, Custom-X-Mailer, Add-Header, and Password
   inputs via :not(), which get explicit widths from the rules below.
   :not() does NOT change specificity, but it removes those IDs from
   the match set — so the cascade has no conflict to resolve. */
#content #page form #advanceSetting input[type="text"]:not([id$="send_input_smtp_xmailler_custom"]):not([id$="send_input_smtp_header"]):not([id$="send_input_smtp_password"]),
#content #page form #advanceSetting input[type="email"],
#content #page form #advanceSetting input[type="password"]:not([id$="send_input_smtp_password"]),
#content #page form #advanceSetting input[type="number"],
#content #page form #advanceSetting select:not([id$="send_input_smtp_xmailler"]) {
  width: 200px !important;
  flex: 0 0 200px;
  min-width: 0;
}

/* Password input is narrower so the show/hide icon button fits in
   the row. Target by ID (not by type attribute) because the ShowPass
   JS toggles type between "password" and "text" — an attribute-based
   selector would stop matching after the toggle.
   Extra #advanceSetting in the selector bumps specificity above the
   general `#content #page form #advanceSetting input[type=...]` rule. */
html body #content #page form #advanceSetting input[id$="send_input_smtp_password"] {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
  box-sizing: border-box !important;
}

/* X-Mailer dropdown, X-Mailer Custom, Add Header.
   Max-specificity selectors with html+body prefix so nothing can outrank. */
html body #content #page form #advanceSetting select[id$="send_input_smtp_xmailler"],
html body #content #page form #advanceSetting input[id$="send_input_smtp_xmailler_custom"],
html body #content #page form #advanceSetting input[id$="send_input_smtp_header"] {
  width: 600px !important;
  min-width: 600px !important;
  max-width: 600px !important;
  flex: 0 0 600px !important;
  box-sizing: border-box !important;
}

/* Kill the floated labels in Advanced Settings.
   Site.css's `#content #page form label { float: left; width: 150px; }`
   was leaving labels floated and overlapping inputs in this panel
   (same bug we fixed for the main form earlier — but scoped to inputFieldDiv1/2).
   Fixed width + right-align so every input starts at the same x-position. */
#content #page form #advanceSetting label {
  float: none !important;
  width: 160px !important;
  margin: 0 !important;
  padding-right: 8px !important;
  text-align: right !important;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Each direct row in Advanced Settings becomes a flex line so the
   label and input sit side-by-side, vertically centered, with no
   floating quirks. Scoped to direct children only — won't disrupt the
   nested .checkbox boxes (which already have their own flex layout). */
#advanceSetting > div:not(.checkbox),
#advanceSetting > fieldset > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* The .ldv wrapper + its sibling within the SMTP fieldset share the row
   evenly: Host | Port, Auth | Secure, Username | Password — side-by-side. */
#advanceSetting > fieldset > div > .ldv,
#advanceSetting > fieldset > div > div {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

/* The little * indicator that floats next to some labels — clean up
   its margin so it sits neatly between label and input. */
#advanceSetting .required {
  margin: 0 4px 0 -4px;
  float: none !important;
}

/* Password "show/hide" toggle — enlarged original PNG with a button-style
   border, padding and hover state. `flex: 0 0 42px` prevents the icon
   from shrinking when its flex parent runs short on space. */
#advanceSetting img[onclick*="ShowPass"] {
  width: 42px !important;
  height: 42px !important;
  padding: 6px !important;
  margin: 0 0 0 6px !important;
  float: none !important;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
  object-fit: contain;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  opacity: 1 !important;
  display: inline-block;
  flex: 0 0 42px;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
#advanceSetting img[onclick*="ShowPass"]:hover {
  background: var(--m-brand-soft);
  border-color: var(--m-brand);
  transform: translateY(-1px);
}

/* Wrapping span stays inline, never squashes its icon child. */
#advanceSetting input[type="password"] + span {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* The original inline `style="float:left;..."` on the password input
   also needs override so it sits inline with the toggle. */
#advanceSetting input[type="password"] {
  float: none !important;
  vertical-align: middle;
}

/* Belt-and-suspenders: no descendant may force the panel wider */
#advanceSetting * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Always reserve room for the vertical scrollbar. Prevents the page
   from getting wider when the Advanced Settings panel closes (or any
   other content shrinks short enough to hide the scrollbar). */
html { overflow-y: scroll; }

/* ----- Submit buttons (Send / Send for Free) -----
   Use the original PNG button images as background, but add modern
   styling: rounded corners, soft shadow, hover lift, focus ring. */

/* Row layout — SCOPED to .slider-wrap (homepage compose form) so other
   pages' .submit divs (e.g. login page's Signup + Sign-in row) keep
   their original alignment. */
#content #page form .slider-wrap div.submit {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 24px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--m-border);
}
#content #page form .slider-wrap div.submit div.free,
#content #page form .slider-wrap div.submit div.pay {
  display: inline-flex;
  margin: 0;
}

/* Shared button base — image-as-background with crisp scaling */
#content #page form div.submit div.free input,
#content #page form div.submit div.pay input,
#content #page form div.submit input[disabled] {
  width: 200px !important;
  height: 100px !important;
  padding: 0 !important;
  margin: 0;
  border: 1px solid transparent !important;
  border-radius: 14px;
  background-color: transparent;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  text-indent: -9999px;       /* hide native value, image already has the label */
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
  transition: transform .15s ease,
              box-shadow .15s ease,
              filter .15s ease,
              border-color .15s ease;
  font-size: 0;               /* belt-and-suspenders for hiding the value text */
}

/* Use the original PNG backgrounds */
#content #page form div.submit div.free input {
  background-image: url("../uploads/images/it/E-mail-anonima-email-gratuita.png") !important;
}
#content #page form div.submit div.pay input {
  background-image: url("../uploads/images/it/E-mail-anonima-email-a-pagamento.png") !important;
}

/* Override the html:first-child padding-left hack (was hiding text further) */
html:first-child div.submit input,
html:first-child div.pay input,
html:first-child div.submit div.pay input,
html:first-child div.submit div.free input {
  padding-left: 0 !important;
}

/* Hover — lift, deeper shadow, subtle brightness boost */
#content #page form div.submit div.free input:hover,
#content #page form div.submit div.pay input:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
  filter: brightness(1.04);
  border-color: var(--m-brand);
}
#content #page form div.submit div.free input:active,
#content #page form div.submit div.pay input:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .14);
}

/* Disabled variant — keep the image but dim it */
#content #page form div.submit input[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  filter: grayscale(.4);
  box-shadow: none !important;
}

/* =========================================================================
   Responsive nudges
   ========================================================================= */

@media (max-width: 720px) {
  #left { width: auto; }
  #content .liensinline,
  #content ul.liensinline {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  #content .liensinline li a { font-size: 12px; }

  #content #page form .slider-wrap div.submit div.free input,
  #content #page form .slider-wrap div.submit div.pay input { width: 100% !important; max-width: 240px; }
  #content #page form .slider-wrap div.submit { flex-direction: column; align-items: center; }
}