/* Shared responsive repair for all Lilyclub service pages. */
:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

/* Email enquiry layout: stable two-column desktop form, single-column mobile. */
form[name="form1"] {
  display: block;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}
form[name="form1"] > table {
  width: 100% !important;
  table-layout: fixed !important;
}
form[name="form1"] > table > tbody > tr > td:first-child:not([colspan]) {
  width: 34% !important;
  padding: 7px 12px 7px 0 !important;
  text-align: right !important;
  vertical-align: middle !important;
}
form[name="form1"] > table > tbody > tr > td:nth-child(2) {
  width: 66% !important;
  padding: 7px 0 !important;
  vertical-align: middle !important;
}
form[name="form1"] > table > tbody > tr > td:first-child div {
  text-align: right !important;
}
form[name="form1"] input:not([type="hidden"]):not([type="submit"]):not([type="reset"]),
form[name="form1"] textarea,
form[name="form1"] select {
  display: block;
  width: 100% !important;
  max-width: 360px !important;
  min-width: 0 !important;
  margin: 0 !important;
}
form[name="form1"] input:not([type="hidden"]):not([type="submit"]):not([type="reset"]) {
  min-height: 38px;
}
form[name="form1"] textarea {
  min-height: 132px;
  resize: vertical;
}
form[name="form1"] td[colspan] > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
form[name="form1"] input[type="submit"],
form[name="form1"] input[type="reset"] {
  width: auto !important;
  min-width: 108px;
  min-height: 42px;
  margin: 0 !important;
  padding: 8px 18px;
}

@media (max-width: 760px) {
  tr:has(> td > form[name="form1"]) > td,
  tr:has(> td > form[name="form1"]) > td + td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 8px 0 !important;
  }
  form[name="form1"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  form[name="form1"] > table {
    display: block !important;
    width: 100% !important;
    table-layout: auto !important;
  }
  form[name="form1"] > table > tbody,
  form[name="form1"] > table > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  form[name="form1"] > table > tbody > tr > td:first-child:not([colspan]),
  form[name="form1"] > table > tbody > tr > td:nth-child(2) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 4px 0 !important;
    text-align: left !important;
  }
  form[name="form1"] > table > tbody > tr > td:first-child div {
    text-align: left !important;
  }
  form[name="form1"] input:not([type="hidden"]):not([type="submit"]):not([type="reset"]),
  form[name="form1"] textarea,
  form[name="form1"] select {
    width: 100% !important;
    max-width: 100% !important;
  }
  form[name="form1"] td[colspan] {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
  }
  form[name="form1"] td[colspan] > div {
    gap: 8px;
  }
}
body {
  color: #000 !important;
  background: #fff !important;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}
body > table {
  width: min(100%, 1237px) !important;
  max-width: 1237px !important;
  margin: 0 auto !important;
}
table { max-width: 100% !important; }
img, iframe, object, embed, video {
  max-width: 100% !important;
  height: auto !important;
}
input, textarea, select, button { max-width: 100%; font: inherit; }
p, td, th, a, span, strong {
  overflow-wrap: anywhere;
  word-break: normal;
}
body,
[bgcolor="#1F0300" i],
[bgcolor="1F0300" i] {
  background-color: #fff !important;
}
.t1, .tt, .tp1, .STYLE2,
.tp, .tp:link, .tp:visited, .tp:active {
  color: #000 !important;
}
.t, .t2, .pt, .pt1, .STYLE1, .STYLE3 {
  color: #20c766 !important;
}
.lm:hover, .tp:hover { color: #087f3d !important; }
a:link:not([class]), a:visited:not([class]) { color: #000; }

@media (max-width: 760px) {
  body > table,
  body > table > tbody,
  body > table > tbody > tr,
  body > table > tbody > tr:nth-child(3) > td,
  body > table > tbody > tr:nth-child(3) > td > table,
  body > table > tbody > tr:nth-child(3) > td > table > tbody,
  body > table > tbody > tr:nth-child(3) > td > table > tbody > tr {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }
  body > table {
    min-width: 0 !important;
    overflow: hidden;
  }
  body > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="138"],
  body > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="33"],
  body > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="29"],
  body > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td[width="242"][valign="top"],
  body > table > tbody > tr:nth-child(3) > td > table > tbody > tr > td:last-child:not([valign]) {
    display: none !important;
  }
  body > table td[width="750"][valign="top"],
  body > table td[width="765"][valign="top"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 12px !important;
    overflow: hidden;
  }
  body > table table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  body > table td, body > table th {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  td[width="750"][valign="top"] img[align="right"],
  td[width="765"][valign="top"] img[align="right"] {
    float: none !important;
    display: block;
    margin: 10px auto;
  }

  tr:has(> td > form[name="form1"]) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  tr:has(> td > form[name="form1"]) > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 8px 0 !important;
  }
  form[name="form1"],
  form[name="form1"] > table,
  form[name="form1"] > table > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  form[name="form1"] > table > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
  }
  form[name="form1"] > table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 5px 0 !important;
    text-align: left !important;
  }
  form[name="form1"] input:not([type="hidden"]):not([type="submit"]),
  form[name="form1"] textarea,
  form[name="form1"] select {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }
  form[name="form1"] textarea { min-height: 132px; resize: vertical; }
  form[name="form1"] input[type="submit"] {
    width: auto !important;
    min-height: 42px;
    padding: 8px 20px;
  }

  /* Convert the six-column See Also table into readable icon/link rows. */
  table:has(> tbody > tr > td:nth-child(6)):has(a[href*="faqs.html"]):has(a[href*="service.html"]),
  table:has(> tbody > tr > td:nth-child(6)):has(a[href*="faqs.html"]):has(a[href*="service.html"]) > tbody {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  table:has(> tbody > tr > td:nth-child(6)):has(a[href*="faqs.html"]):has(a[href*="service.html"]) > tbody > tr:first-child {
    display: none !important;
  }
  table:has(> tbody > tr > td:nth-child(6)):has(a[href*="faqs.html"]):has(a[href*="service.html"]) > tbody > tr:not(:first-child) {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    gap: 4px 8px;
    align-items: center;
  }
  table:has(> tbody > tr > td:nth-child(6)):has(a[href*="faqs.html"]):has(a[href*="service.html"]) > tbody > tr:not(:first-child) > td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 4px 0 !important;
    text-align: left !important;
    overflow-wrap: normal !important;
  }
  table:has(> tbody > tr > td:nth-child(6)):has(a[href*="faqs.html"]):has(a[href*="service.html"]) img {
    width: 17px !important;
    height: 25px !important;
  }

  /* Remove fixed footer/spacer heights that caused the large blank area. */
  body > table > tbody > tr:last-child,
  body > table > tbody > tr:nth-last-child(2) {
    height: auto !important;
  }
}

/* Final form overrides stay last so legacy mobile rules cannot reintroduce
   narrow fields, vertical labels, or uneven button spacing. */
@media (max-width: 760px) {
  tr:has(> td > form[name="form1"]) > td {
    padding: 8px 0 !important;
  }
  form[name="form1"] > table > tbody > tr {
    display: block !important;
  }
  form[name="form1"] > table > tbody > tr > td:first-child:not([colspan]),
  form[name="form1"] > table > tbody > tr > td:nth-child(2) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 0 !important;
    text-align: left !important;
  }
  form[name="form1"] > table > tbody > tr > td:first-child div {
    text-align: left !important;
  }
  form[name="form1"] input:not([type="hidden"]):not([type="submit"]):not([type="reset"]),
  form[name="form1"] textarea,
  form[name="form1"] select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  form[name="form1"] td[colspan] > div {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
  }
}