/* =========================================
   PxPlus Additional Components Page
   download_optional.css
   ========================================= */

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

/* ── Page text font ── */
#content h1,
#content p,
#content font,
#content td {
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif;
}

/* ── Page title styling ── */
#content h1 {
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  text-align: center !important;
  display: block !important;
  margin-bottom: 8px !important;
  padding-bottom: 12px !important;
  border-bottom: 3px solid #760a0a !important;
}

/* ── Page subtitle ── */
#content p[align="left"] {
  text-align: center !important;
  margin-bottom: 24px !important;
}

#content p[align="left"] font[size="4"] {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #760a0a !important;
}

#content p[align="left"] a {
  display: block !important;
  font-size: 12px !important;
  color: #760a0a !important;
  text-decoration: underline !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

/* ── Table shell — rounded corners + shadow ── */
.optmain {
  background: #ffffff;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  overflow: hidden;
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 1.5rem;
  width: 100% !important;
}

/* ── Section headers — grey background ── */
.optmain td[bgcolor="#000000"],
.optmain td[bgcolor="#808080"] {
  background: #e3e3e3 !important;
  padding: 11px 18px !important;
  border-top: 1px solid #cccccc !important;
  border-bottom: 1px solid #cccccc !important;
}

/* ── Section header main title ── */
.optmain td[bgcolor="#000000"] font[size="4"],
.optmain td[bgcolor="#808080"] font[size="4"] {
  display: block !important;
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
}

/* ── Section header subtitle (PxPlus 2024 and later) ── */
.optmain td[bgcolor="#000000"] font[size="1"],
.optmain td[bgcolor="#808080"] font[size="1"] {
  display: block !important;
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  color: #760a0a !important;
  margin-top: 3px !important;
}

/* ── Section header — override any other font tags ── */
.optmain td[bgcolor="#000000"] font,
.optmain td[bgcolor="#808080"] font {
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif !important;
}

/* ── Column label rows ── */
.optmain tr:has(td[bgcolor="#000000"]) + tr > td,
.optmain tr:has(td[bgcolor="#808080"]) + tr > td {
  background: #f7f7f7 !important;
  color: #777777 !important;
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 7px 18px !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

/* ── Data cells ── */
.optmain td {
  padding: 11px 18px;
  vertical-align: middle;
  border-bottom: 1px solid #f0ecec;
  color: #1a1a1a;
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.optmain tr:last-child td {
  border-bottom: none;
}

/* ── Date/Size/File columns — fixed width, no wrap ── */
.optmain td[align="center"] {
  white-space: nowrap !important;
  text-align: center !important;
  width: 120px !important;
}

/* ── Override font tags in data cells ── */
.optmain td font {
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif !important;
  font-size: 13px !important;
  color: #1a1a1a !important;
}

/* ── Green labels (32 bit / 64 bit) ── */
.optmain td font[color="#008000"] {
  color: #1e6b2e !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ── Remove inline white bgcolor on data cells ── */
.optmain td[bgcolor="#FFFFFF"] {
  background: transparent !important;
}

/* ── Alternating rows ── */
.optmain > tbody > tr:nth-child(odd) {
  background: #faf8f8;
}
.optmain > tbody > tr:nth-child(even) {
  background: #ffffff;
}

/* ── Row hover ── */
.optmain > tbody > tr:hover {
  background: #fdeeed !important;
  transition: background 0.12s;
}

/* ── Hide empty spacer rows ── */
.optmain > tbody > tr:has(> td:empty) {
  display: none !important;
}

/* ── Download buttons ── */
div#container div#content table.optmain tr a,
div#container div#content table.optmain tr a:link,
div#container div#content table.optmain tr a:visited {
  display: inline-block !important;
  background: #760a0a !important;
  color: #ffffff !important;
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif !important;
  padding: 5px 13px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(118,10,10,0.25) !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}

div#container div#content table.optmain tr a:hover,
div#container div#content table.optmain tr a:active {
  background: #550808 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(118,10,10,0.4) !important;
}

/* ── Force white on font tag inside buttons ── */
div#container div#content table.optmain tr a font,
div#container div#content table.optmain tr a * {
  color: #ffffff !important;
  font-size: 11px !important;
  font-family: 'Montserrat', 'Segoe UI', Verdana, sans-serif !important;
}

/* ── Footnote/colspan rows ── */
.optmain td[colspan="4"] {
  font-size: 11px !important;
  color: #666 !important;
  background: #fafaf8 !important;
  padding: 8px 18px !important;
  line-height: 1.7 !important;
  border-top: 1px solid #e8e0e0 !important;
  white-space: normal !important;
  width: auto !important;
}