/*
    Christell brand styling, taken from "CHRISTELL 2.0 LOGO Color Typography"
    in omni-booking/brand/.

    Typeface: Lena Regular is the primary face and is used for headings and the
    tagline. Montserrat is the family of typefaces and carries everything else.
    Both are self-hosted rather than pulled from a font CDN, which is what lets
    the Content-Security-Policy stay at font-src 'self'.

    Colour: Carbon Fiber for text, the brand gold for accents, Venetian Lace as
    the page ground, and the emblem magenta used sparingly as a rule colour.
*/

@font-face {
    font-family: "Lena";
    src: url("../fonts/lena-400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --carbon-fiber: #2f2e2e;
    --gold: #d99c2b;
    --venetian-lace: #f7edda;
    --coral: #ff8f73;
    --mystic-magenta: #e32d7d;
    --white: #ffffff;

    --body-font: "Montserrat", "Segoe UI", Arial, sans-serif;
    --display-font: "Lena", "Montserrat", "Segoe UI", Arial, sans-serif;

    --page-width: 62rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--carbon-fiber);
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.6;
}

a {
    color: var(--carbon-fiber);
    text-decoration: none;
    border-bottom: 1px solid rgba(217, 156, 43, 0.6);
}

a:hover,
a:focus-visible {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* Hero -------------------------------------------------------------------- */

.hero {
    background: var(--venetian-lace);
    padding: 4.5rem 1.5rem 5rem;
    text-align: center;
}

.hero__inner {
    max-width: var(--page-width);
    margin: 0 auto;
}

.hero__logo {
    width: 100%;
    max-width: 22rem;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero__tagline {
    margin: 2rem auto 0;
    max-width: 34rem;
    font-family: var(--display-font);
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--carbon-fiber);
}

/* Contact ----------------------------------------------------------------- */

.contact {
    padding: 3.5rem 1.5rem;
}

.contact__inner {
    max-width: var(--page-width);
    margin: 0 auto;
}

.contact__heading {
    margin: 0 0 2rem;
    font-family: var(--display-font);
    font-size: 1.75rem;
    font-weight: 400;
    text-align: center;
    color: var(--carbon-fiber);
}

.contact__heading::after {
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    margin: 0.85rem auto 0;
    background: var(--mystic-magenta);
}

.contact__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0;
}

.contact__item dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

.contact__item dd {
    margin: 0.4rem 0 0;
    font-size: 1.05rem;
}

/* Notice pages ------------------------------------------------------------ */

.notice {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--venetian-lace);
}

.notice__inner {
    max-width: 30rem;
    text-align: center;
}

.notice__logo {
    width: 100%;
    max-width: 15rem;
    height: auto;
    margin: 0 auto 2.5rem;
    display: block;
}

.notice__heading {
    margin: 0 0 1rem;
    font-family: var(--display-font);
    font-size: 1.5rem;
    font-weight: 400;
}

.notice__body {
    margin: 0;
    font-size: 1.05rem;
}

/* Checkout ---------------------------------------------------------------- */

/*
    Every visitor arrives by tapping a link in an SMS, so this is designed for a
    phone held in one hand and only then allowed to grow. Nothing is hidden
    behind a tap: the whole summary is on screen at once, because a customer
    about to pay should be able to check every detail without hunting.
*/

.checkout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem 3rem;
    background: var(--venetian-lace);
}

.checkout__inner {
    width: 100%;
    max-width: 26rem;
    padding: 2rem 1.5rem 2.25rem;
    background: var(--white);
    border-radius: 0.75rem;
}

.checkout__logo {
    width: 100%;
    max-width: 11rem;
    height: auto;
    margin: 0 auto 1.75rem;
    display: block;
}

.checkout__greeting {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.checkout__heading {
    margin: 0 0 1.5rem;
    font-family: var(--display-font);
    font-size: 1.4rem;
    font-weight: 400;
}

.checkout__details {
    margin: 0;
    border-top: 1px solid var(--venetian-lace);
}

.checkout__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--venetian-lace);
}

.checkout__row dt {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

.checkout__row dd {
    margin: 0;
    text-align: right;
    font-size: 1rem;
}

/* The one figure the whole page exists for, so it is the only thing on it that
   is allowed to shout. */
.checkout__amount {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 2px solid var(--mystic-magenta);
}

.checkout__amount-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

.checkout__amount-value {
    font-family: var(--display-font);
    font-size: 1.6rem;
    line-height: 1.2;
    white-space: nowrap;
}

.checkout__pending {
    margin: 1.75rem 0 0;
    padding: 0.9rem 1rem;
    background: var(--venetian-lace);
    border-radius: 0.5rem;
    font-size: 0.95rem;
}

.checkout__help {
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    color: rgba(47, 46, 46, 0.75);
}

/* The pay button. Used twice: once to open a payment attempt on this site, and
   once to hand the customer to PayHere. Both are ordinary form submissions, so
   the same element carries both. */
.checkout__pay {
    margin: 1.75rem 0 0;
}

.button {
    display: block;
    width: 100%;
    padding: 0.95rem 1.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--carbon-fiber);
    color: var(--white);
    font-family: var(--body-font);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}

.button:hover {
    background: var(--gold);
}

.button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.checkout__reassure {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: rgba(47, 46, 46, 0.75);
}

/* The result pages reuse the notice layout; these two are the only things they
   show that a plain notice does not. */
.notice__amount {
    margin: 0 0 0.75rem;
    font-family: var(--display-font);
    font-size: 1.6rem;
    line-height: 1.2;
}

.notice__reference {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: rgba(47, 46, 46, 0.7);
}

/* Footer ------------------------------------------------------------------ */

.footer {
    padding: 2rem 1.5rem 2.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(47, 46, 46, 0.7);
    border-top: 1px solid var(--venetian-lace);
}

.footer p {
    margin: 0;
}

/* Wider screens ----------------------------------------------------------- */

@media (min-width: 40rem) {
    .hero {
        padding: 6rem 2rem 6.5rem;
    }

    .hero__tagline {
        font-size: 1.75rem;
    }

    .contact__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
        text-align: center;
    }

    .checkout__inner {
        padding: 2.5rem 2.25rem 2.75rem;
    }

    .checkout__heading {
        font-size: 1.6rem;
    }
}