/* ==========================================================================
   KPOD Digitisation Programme — transactional mail theme
   --------------------------------------------------------------------------
   The palette is the app's own (see the frontend's globals.css / Tailwind
   tokens), reduced to what mail clients can actually be trusted with:

     bg-base            #070C15      surface-primary  #111B2C
     surface-secondary  #172338      border-default   #293A55
     brand-purple       #6C63E8      brand-magenta    #D3387F
     brand-orange       #FF8A2A      brand-purple-lt  #9189FF
     text-primary       #F8FAFF      text-secondary   #CBD4E4
     text-muted         #91A0B6

   No gradients, no flexbox, no shorthand borders on table cells: the brand
   sweep is three solid cells, and every panel gets a matching `bgcolor`
   attribute in the Blade so Outlook has something to paint.
   ========================================================================== */

body {
    background-color: #070C15;
    color: #CBD4E4;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: none;
    margin: 0;
    padding: 0;
    width: 100% !important;
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */

.wrapper {
    background-color: #070C15;
    margin: 0;
    padding: 0;
    width: 100%;
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
}

.content {
    margin: 0;
    padding: 0;
    width: 100%;
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
}

/* -------------------------------------------------------------------------
   Header — logo chip
   ------------------------------------------------------------------------- */

.header {
    padding: 32px 0 22px;
    text-align: center;
}

.header a {
    text-decoration: none;
}

/* The mark is drawn for light backgrounds — its wordmark is #737373, which
   goes muddy on navy — so it keeps the white chip the prototype gave it. */
.logo-chip {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 14px 22px;
}

.logo {
    border: 0;
    display: block;
    height: auto;
    max-width: 100%;
    width: 168px;
}

.brand-rule td {
    font-size: 0;
    line-height: 0;
    height: 3px;
}

/* -------------------------------------------------------------------------
   Body card
   ------------------------------------------------------------------------- */

.body {
    background-color: #070C15;
    border-bottom: 1px solid #070C15;
    border-top: 1px solid #070C15;
    margin: 0;
    padding: 0;
    width: 100%;
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
}

.inner-body {
    background-color: #111B2C;
    border-color: #293A55;
    border-radius: 14px;
    border-style: solid;
    border-width: 1px;
    margin: 0 auto;
    padding: 0;
    width: 570px;
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 570px;
}

.content-cell {
    max-width: 100vw;
    padding: 34px;
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */

h1 {
    color: #F8FAFF;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 0;
    text-align: left;
}

h2 {
    color: #F8FAFF;
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
    text-align: left;
}

h3 {
    color: #F8FAFF;
    font-size: 14px;
    font-weight: 700;
    margin-top: 0;
    text-align: left;
}

p {
    color: #CBD4E4;
    font-size: 15px;
    line-height: 1.6em;
    margin-top: 0;
    text-align: left;
}

p.sub {
    font-size: 12px;
}

a {
    color: #9189FF;
    text-decoration: underline;
}

img {
    max-width: 100%;
}

/* -------------------------------------------------------------------------
   Button
   ------------------------------------------------------------------------- */

.action {
    margin: 30px auto;
    padding: 0;
    text-align: center;
    width: 100%;
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
}

.button {
    border-radius: 8px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-decoration: none;
    -webkit-text-size-adjust: none;
}

.button-blue,
.button-primary {
    background-color: #6C63E8;
    border-bottom: 10px solid #6C63E8;
    border-left: 22px solid #6C63E8;
    border-right: 22px solid #6C63E8;
    border-top: 10px solid #6C63E8;
}

.button-green,
.button-success {
    background-color: #35D39A;
    border-bottom: 10px solid #35D39A;
    border-left: 22px solid #35D39A;
    border-right: 22px solid #35D39A;
    border-top: 10px solid #35D39A;
    color: #06231A;
}

.button-red,
.button-error {
    background-color: #F06476;
    border-bottom: 10px solid #F06476;
    border-left: 22px solid #F06476;
    border-right: 22px solid #F06476;
    border-top: 10px solid #F06476;
}

/* -------------------------------------------------------------------------
   Panel — used for the "paste this link" fallback
   ------------------------------------------------------------------------- */

.panel {
    border-left: 3px solid #6C63E8;
    margin: 22px 0;
    -premailer-width: 100%;
}

.panel-content {
    background-color: #172338;
    color: #CBD4E4;
    padding: 16px;
}

.panel-content p {
    color: #CBD4E4;
}

.panel-item {
    padding: 0;
}

.panel-item p:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* -------------------------------------------------------------------------
   Subcopy + footer
   ------------------------------------------------------------------------- */

.subcopy {
    border-top: 1px solid #293A55;
    margin-top: 26px;
    padding-top: 22px;
}

.subcopy p {
    color: #91A0B6;
    font-size: 13px;
    line-height: 1.55em;
}

.subcopy a {
    color: #9189FF;
    word-break: break-all;
}

.footer {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 570px;
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 570px;
}

.footer p {
    color: #6E7C93;
    font-size: 12px;
    text-align: center;
}

.footer a {
    color: #91A0B6;
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Tables inside the body
   ------------------------------------------------------------------------- */

.table table {
    margin: 30px auto;
    width: 100%;
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
}

.table th {
    border-bottom: 1px solid #293A55;
    color: #91A0B6;
    margin: 0;
    padding-bottom: 8px;
}

.table td {
    color: #CBD4E4;
    font-size: 15px;
    line-height: 18px;
    margin: 0;
    padding: 10px 0;
}

.content-cell hr {
    border: 0;
    border-top: 1px solid #293A55;
    margin: 26px 0;
}