/* modern.css - refreshed MAIN BODY design (2026-10-07), re-themed in the IndoTranslator red from malaytranslators.com.au. Everything is scoped under article.mt, so the header,
   footer and order form keep common.css untouched. Loaded only by pages that opt in (index.php so far). */

article.mt { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: #1f2937; }
article.mt p { line-height: 1.7; }

/* ---------- hero (left column beside the order form) ---------- */
article.mt .colLeft h1 { font-size: 34px; line-height: 1.2; font-weight: 800; color: #b21612; letter-spacing: -0.5px; margin: 34px 0 14px !important; }
article.mt .colLeft > p { font-size: 16px; color: #374151; }
article.mt .colLeft em { font-style: normal; color: #b21612; font-weight: 600; }
article.mt .checkPoint { display: flex; gap: 12px; align-items: flex-start; background: #fdf6f5; border: 1px solid #f2dcda;
  border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
article.mt .checkPoint .material-icons { flex: 0 0 auto; background: #b21612; color: #fff; border-radius: 50%; font-size: 18px;
  width: 28px; height: 28px; line-height: 28px; text-align: center; margin: 0; float: none; }
article.mt .checkPoint .point { margin: 0; float: none; width: auto; font-size: 14.5px; color: #4b5563; line-height: 1.5; }
article.mt .checkPoint b { display: block; color: #111827; font-size: 15.5px; margin-bottom: 2px; font-family: inherit; font-weight: 700; }
article.mt .feature-title, article.mt .feature-description, article.mt .colLeft h1 { font-family: inherit; }

/* ---------- four-feature band ---------- */
article.mt .feature { background: #fdf6f5; }
article.mt .feature-row { background: #fff; border: 1px solid #f2dcda; border-radius: 12px; padding: 14px; box-shadow: 0 1px 2px rgba(178,22,18,.06); }
article.mt .feature-title { color: #b21612; font-weight: 700; }
article.mt .feature-row { box-sizing: border-box; margin: 0 16px 20px 0; display: flex; gap: 14px; align-items: flex-start; }
article.mt .feature-row .feature-icon, article.mt .feature-row .feature-item { float: none; }
article.mt .feature-row .feature-item { flex: 1; width: auto; min-width: 0; }

/* ---------- body sections ---------- */
article.mt .mt-body { border-top: 0; padding: 10px 0 40px; }
article.mt .mt-body section { margin: 0 0 44px; }
article.mt .mt-body h2 { font-size: 28px; font-weight: 800; color: #b21612; letter-spacing: -0.3px; margin: 30px 0 12px; }
article.mt .mt-body h3 { font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 16px; padding-left: 12px; border-left: 4px solid #e8b422; }
article.mt .mt-lead { font-size: 17px; color: #374151; max-width: 860px; }

article.mt .mt-callout { background: linear-gradient(135deg, #b21612, #d0322c); color: #fff; border-radius: 16px; padding: 26px 28px; }
article.mt .mt-callout h3 { color: #fff; border-left-color: #e8b422; }
article.mt .mt-callout p { color: #fde8e6; margin: 0; font-size: 15.5px; }

article.mt .mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
article.mt .mt-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px; transition: box-shadow .2s, transform .2s; }
article.mt .mt-card:hover { box-shadow: 0 8px 24px rgba(178,22,18,.10); transform: translateY(-2px); }
article.mt .mt-card .material-icons { color: #b21612; background: #fbe9e8; border-radius: 10px; padding: 8px; font-size: 22px; }
article.mt .mt-card h4 { margin: 12px 0 6px; font-size: 16px; color: #111827; }
article.mt .mt-card p { margin: 0; font-size: 14px; color: #4b5563; line-height: 1.55; }

article.mt .mt-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
article.mt .mt-price { border: 1px solid #e5e7eb; border-radius: 16px; padding: 22px; background: #fff; }
article.mt .mt-price.is-main { border: 2px solid #b21612; box-shadow: 0 10px 28px rgba(178,22,18,.12); }
article.mt .mt-price h4 { margin: 0 0 8px; font-size: 15px; color: #4b5563; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
article.mt .mt-price .amt { font-size: 36px; font-weight: 800; color: #b21612; line-height: 1.1; }
article.mt .mt-price .amt small { font-size: 15px; font-weight: 500; color: #6b7280; }
article.mt .mt-price ul { list-style: none; margin: 12px 0 0; padding: 0; }
article.mt .mt-price li { font-size: 14px; color: #374151; padding: 6px 0; margin: 0; border-top: 1px solid #f1f5f9; position: static; }
article.mt .mt-price li::before, article.mt .mt-price li:before { content: none; display: none; }

article.mt .mt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; counter-reset: s; }
article.mt .mt-steps li { counter-increment: s; background: #fdf6f5; border-radius: 14px; padding: 20px 18px 18px; position: relative; }
article.mt .mt-steps li::before { content: counter(s); display: inline-block; width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 50%; background: #e8b422; color: #b21612; font-weight: 800; margin-bottom: 10px; }
article.mt .mt-steps b { display: block; color: #111827; font-size: 16px; margin-bottom: 4px; }
article.mt .mt-steps span { font-size: 14px; color: #4b5563; line-height: 1.55; }

article.mt .mt-faq details { border: 1px solid #e5e7eb; border-radius: 12px; margin: 0 0 10px; background: #fff; }
article.mt .mt-faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 600; color: #111827; position: relative; }
article.mt .mt-faq summary::-webkit-details-marker { display: none; }
article.mt .mt-faq summary::after { content: '+'; position: absolute; right: 18px; top: 12px; font-size: 22px; color: #b21612; font-weight: 400; }
article.mt .mt-faq details[open] summary::after { content: '\2212'; }
article.mt .mt-faq details p { margin: 0; padding: 0 18px 16px; color: #4b5563; font-size: 14.5px; }

article.mt .mt-about { background: #f9fafb; border-radius: 16px; padding: 22px 24px; }
article.mt .mt-about p { margin: 0; color: #4b5563; }

@media (max-width: 640px) {
  article.mt .colLeft h1 { font-size: 27px; }
  article.mt .mt-body h2 { font-size: 23px; }
  article.mt .mt-body h3 { font-size: 19px; }
  article.mt .mt-callout { padding: 20px; }
  article.mt .feature-row { width: auto; float: none; margin: 0 0 14px; }
}

/* city pages + small fixes (2026-10-07) */
article.mt .mt-price li { line-height: 1.45; }
article.mt .mt-crumb { margin: 26px 0 0; font-size: 13.5px; color: #6b7280; }
article.mt .mt-crumb a { color: #b21612; }
article.mt .colLeft h1 { margin-top: 10px !important; }
article.mt .mt-callout p { margin: 0 0 10px; }
article.mt .mt-callout .mt-source { color: #f6cbc8; font-size: 13px; margin: 6px 0 0; }
article.mt .mt-source { font-size: 13px; color: #6b7280; }
article.mt .mt-lead + .mt-lead { margin-top: 12px; }

/* hero spacing + alignment (2026-10-07): the h1 and the top of the form card share ONE offset, so they line up.
   City pages have a breadcrumb above the h1; there the card drops by the breadcrumb's height (.has-crumb). */
article.mt .colLeft { padding-top: 0; }
article.mt .colLeft h1 { margin-top: 44px !important; }
article.mt .drivingLicenseForm { margin-top: 51px; }  /* = h1 margin + the h1's half-leading, so the card meets the letter tops */
article.mt .mt-crumb { margin: 26px 0 0; line-height: 20px; height: 20px; }
article.mt .colLeft.has-crumb h1 { margin-top: 18px !important; }
article.mt .container.has-crumb .drivingLicenseForm { margin-top: 68px; }

/* FORM CARD - restyles the form that form.js / form-ms.js inject into #formRight. CSS only: no field, name or
   validation hook changes. Width kept inside the old 415px column so the two-column layout is unchanged. */
article.mt .drivingLicenseForm { margin-left: 50px; margin-right: 0; background: #fff; border: 1px solid #f2dcda; border-radius: 18px;
  box-shadow: 0 14px 40px rgba(178,22,18,.10); padding: 22px 22px 8px; box-sizing: border-box; }
article.mt .drivingLicenseForm .hdrTranslateLicense { font-size: 20px; font-weight: 800; color: #b21612; margin: 0 0 4px; }
article.mt .drivingLicenseForm > p { margin: 0; color: #6b7280; font-size: 14px; }
article.mt #formRight form { width: 400px; padding: 14px 0 6px; }
article.mt .drivingLicenseForm input, article.mt .drivingLicenseForm select, article.mt .drivingLicenseForm textarea {
  border: 1px solid #d1d5db; border-radius: 10px; padding: 12px 13px; font-size: 15px; font-family: inherit; color: #111827;
  background: #fff; transition: border-color .15s, box-shadow .15s; }
article.mt .drivingLicenseForm select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b21612' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; }
article.mt .drivingLicenseForm input:focus, article.mt .drivingLicenseForm select:focus, article.mt .drivingLicenseForm textarea:focus {
  outline: none; border-color: #b21612; box-shadow: 0 0 0 3px rgba(178,22,18,.15); }
article.mt .drivingLicenseForm textarea { height: 96px; }
article.mt .drivingLicenseForm input[type=file] { padding: 10px; background: #fdf6f5; border-style: dashed; }
article.mt .drivingLicenseForm #btnSubmit { height: 50px; border-radius: 12px; background: linear-gradient(135deg, #b21612, #d0322c);
  font-size: 16px; font-weight: 700; letter-spacing: .2px; box-shadow: 0 6px 16px rgba(178,22,18,.25); transition: transform .15s, box-shadow .15s; }
article.mt .drivingLicenseForm #btnSubmit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(178,22,18,.30); }
article.mt .drivingLicenseForm .req { color: #6b7280; font-size: 13px; }
article.mt .drivingLicenseForm input.error, article.mt .drivingLicenseForm select.error { border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185,28,28,.10); }
article.mt #formRight .iti { width: 100%; }
@media (max-width: 640px) {
  article.mt .colLeft { padding-top: 10px; }
  article.mt .drivingLicenseForm { margin: 10px 0 24px; padding: 18px 16px 6px; width: auto; float: none; }
  article.mt #formRight form { width: auto; }
}

/* IndoTranslator extras (2026-10-07) */
article.mt .mt-body .sec-header { font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 16px; padding-left: 12px; border-left: 4px solid #e8b422; }
article.mt .mt-body h2.sec-header { font-size: 26px; color: #b21612; border-left: 0; padding-left: 0; }
article.mt .mt-text p { font-size: 16px; color: #374151; max-width: 900px; }
article.mt .mt-chips ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
article.mt .mt-chips li { margin: 0; padding: 11px 14px; border: 1px solid #f2dcda; border-radius: 10px; background: #fff;
  color: #1f2937; font-size: 14.5px; line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
article.mt .mt-chips li::before, article.mt .mt-chips li:before { content: none; display: none; }
article.mt .mt-chips li:hover { border-color: #b21612; box-shadow: 0 4px 14px rgba(178,22,18,.10); }
article.mt .mt-chips a, article.mt .mt-chips a:visited { color: #1f2937; text-decoration: none; display: block; font-size: inherit; line-height: inherit; font-family: inherit; }
article.mt .mt-chips a:hover { color: #b21612; }
article.mt .mt-figure { margin: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 14px; }
article.mt .mt-figure img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
article.mt .mt-faq details p a { color: #b21612; }

/* feature band centred (2026-10-07): the old floats left the four cards hugging the left edge */
article.mt .feature .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
article.mt .feature .container > .clearFloats { display: none; }
article.mt .feature .feature-row { margin: 0 0 4px; }
article.mt .feature { padding-bottom: 36px; }

/* free-form body pages (service, location, NAATI pages - 2026-10-07): content sits straight in .container */
article.mt .mt-body > .container > h2, article.mt .mt-body > .container > h3 { margin-top: 34px; }
article.mt .mt-body > .container > h2:first-child, article.mt .mt-body > .container > h3:first-child { margin-top: 10px; }
article.mt .mt-body h2 { font-size: 26px; }
article.mt .mt-body > .container > p, article.mt .mt-body > .container li { font-size: 16px; color: #374151; line-height: 1.7; max-width: 920px; }
article.mt .mt-body > .container a { color: #b21612; }
article.mt .mt-body img { max-width: 100%; height: auto; border-radius: 10px; }
article.mt .mt-body table { border-collapse: collapse; width: 100%; max-width: 920px; margin: 10px 0 20px; font-size: 15px; }
article.mt .mt-body td, article.mt .mt-body th { border: 1px solid #f2dcda; padding: 9px 12px; text-align: left; }
article.mt .mt-body th { background: #fdf6f5; color: #111827; }

/* document-by-city local section (2026-10-07) */
article.mt .mt-local { background: #fff; border: 1px solid #f2dcda; border-radius: 16px; padding: 24px 26px; margin: 10px 0 26px; max-width: 980px; }
article.mt .mt-local h2 { margin-top: 0; }
article.mt .mt-local h3 { margin: 22px 0 8px; font-size: 19px; }
article.mt .mt-local p, article.mt .mt-local li { font-size: 16px; color: #374151; line-height: 1.7; }
article.mt .mt-local .mt-facts { padding-left: 0; list-style: none; margin: 8px 0; }
article.mt .mt-local .mt-facts li { position: relative; padding: 8px 12px 8px 30px; background: #fdf6f5; border-radius: 10px; margin-bottom: 8px; }
article.mt .mt-local .mt-facts li:before { content: ''; position: absolute; left: 12px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #b21612; }
article.mt .mt-local .mt-src { font-size: 13px; color: #6b7280; }
article.mt .mt-local .mt-src a { color: #6b7280; text-decoration: underline; }