.memberships{
    min-height: 100vh;
}

/* The pages either side of a sign-in that are not the sign-in: asking for a
 * reset link, and setting the new password.
 *
 * Same invitation picture, same frosted panel as registration, because they
 * belong to the same moment - somebody standing at the door. Neither page has
 * anything else on it: one thing to do, and a way back to the sign-in. */
.account-page {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background-color: #16120D;
    background-image: url('/images/UI/invitation.jpg');
    background-size: cover;
    background-position: 62% 58%;
    background-attachment: fixed;
}

.modal-content.account-dialog {
    width: min(92%, 30rem);
    display: flex;
    flex-direction: column;
}

.dialog-message {
    font-family: var(--main-font-face);
    font-size: var(--type-body-01-size);
    line-height: var(--type-body-01-height);
    letter-spacing: var(--type-body-01-spacing);
    line-height: 1.5;
    color: var(--dialog-ink);
    margin: 0 0 var(--space-5);
}

/* The way back, kept quiet and kept present - somebody who has remembered
 * their password halfway through this should not have to use the back
 * button. */
.dialog-footer {
    padding: var(--space-3) var(--space-5) var(--space-5);
    font-family: var(--main-font-face);
    font-size: var(--type-label-01-size);
    line-height: var(--type-label-01-height);
    letter-spacing: var(--type-label-01-spacing);
}

.dialog-footer a {
    color: var(--dialog-muted);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.dialog-footer a:hover,
.dialog-footer a:focus-visible {
    color: var(--dialog-ink);
    border-bottom-color: #FFD9A0;
}

/* The sign-up dialog.
 *
 * Frosted rather than solid: it opens from the invitation picture and the
 * picture stays there behind it, so somebody is still in the same place they
 * started rather than on a form on a different page. White border because at
 * this alpha the panel edge would otherwise disappear into the foliage.
 *
 * The dialog itself is the product's one dialog surface (see
 * --dialog-surface in root.css) rather than the dark glass it used to be.
 * It was light-on-dark so as not to punch a hole in the artwork behind it,
 * but every other dialog in both clients is this warm card, and a sign-up
 * box that looks like nothing else in the product is the worse trade. The
 * hero, the plans and the footer around it are still light-on-dark - they
 * are the page, not the dialog. */
.modal-content {
    width: min(92%, 34rem);
    max-height: min(88dvh, 52rem);
    overflow: hidden auto;
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--dialog-ink);
    background: var(--dialog-surface);
    border: 1px solid var(--dialog-edge);
    border-radius: var(--card-border-radius);
    box-shadow: var(--dialog-shadow);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    backdrop-filter: var(--dialog-veil);
    -webkit-backdrop-filter: var(--dialog-veil);
}

/* Title on the left, the way out on the right. It was sitting on top of the
 * first field before, where it looked like part of it. */
.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

/* White rather than the terracotta every other h2 on the site gets - that
 * colour is for headings on parchment and it goes muddy on this panel. */
.dialog-title {
    font-family: var(--heading-font-face);
    font-size: var(--type-heading-03-size);
    line-height: var(--type-heading-03-height);
    font-weight: 400;
    line-height: 1.2;
    color: var(--dialog-ink);
    margin: 0;
}

.dialog-close {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    padding: 0;
    color: var(--dialog-muted);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.dialog-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.dialog-close:focus-visible {
    outline: 2px solid #FFD9A0;
    outline-offset: 2px;
}

.dialog-body {
    padding: var(--space-5);
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
}

/* Carbon's text input, in the dialog's own colours: the field's name above
 * it, what to type inside it, and the thing worth knowing underneath. Square
 * corners and a single underline are Carbon's - the underline is what carries
 * the state, which is why there is no box outline to fight it. */
.form-field {
    margin-bottom: var(--space-5);
}

.field-label {
    display: block;
    font-size: var(--type-label-01-size);
    line-height: var(--type-label-01-height);
    letter-spacing: var(--type-label-01-spacing);
    letter-spacing: 0.32px;
    line-height: 1.34;
    color: var(--dialog-muted);
    margin-bottom: var(--space-1);
}

.field-input {
    width: 100%;
    height: 2.5rem;
    box-sizing: border-box;
    padding: 0 var(--space-3);
    font-family: var(--main-font-face);
    font-size: var(--type-body-02-size);
    line-height: var(--type-body-02-height);
    color: var(--dialog-ink);
    background: var(--dialog-inset);
    border: 1px solid var(--dialog-edge);
    border-radius: var(--card-border-radius);
}

.field-input::placeholder {
    color: var(--dialog-muted);
}

/* Carbon's focus ring sits inside the field rather than around it, so the
 * fields stay on their grid when one is focused. */
.field-input:focus {
    outline: 2px solid #FFD9A0;
    outline-offset: -2px;
    background: rgba(255, 255, 255, 0.16);
}

/* :user-invalid rather than :invalid - a required field is invalid while it
 * is still empty, so :invalid marks every field red before anybody has typed
 * a character. This waits until they have actually got something wrong. */
.field-input:user-invalid {
    border-bottom-color: #FFB1A8;
}

.field-hint {
    font-size: var(--type-label-01-size);
    line-height: var(--type-label-01-height);
    letter-spacing: var(--type-label-01-spacing);
    line-height: 1.34;
    color: var(--dialog-muted);
    margin: var(--space-1) 0 0;
}

/* Anything wrong with a field says so where its hint is, in the same place,
 * rather than appearing above or below and moving everything else. */
.field-hint-error {
    color: #FFB1A8;
}

.field-hint-error:empty {
    display: none;
}

/* The eye sits in the field rather than beside it, so the field is still the
 * full width of every other one. */
.field-with-button {
    position: relative;
}

.field-with-button .field-input {
    padding-right: 2.75rem;
}

.field-button {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--dialog-muted);
    background: transparent;
    border: none;
    cursor: pointer;
}

.field-button:hover {
    color: var(--dialog-ink);
}

.field-button:focus-visible {
    outline: 2px solid #FFD9A0;
    outline-offset: -2px;
}

.form-error {
    font-size: var(--type-label-01-size);
    line-height: var(--type-label-01-height);
    letter-spacing: var(--type-label-01-spacing);
    line-height: 1.4;
    color: #FFB1A8;
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: rgba(179, 58, 58, 0.28);
    border-left: 3px solid #FFB1A8;
}

/* The five seats a Group subscription buys besides the payer's own. Named
 * here and handed out here, because the moment somebody has decided to buy
 * for six people is the moment they know who the six are. */
.group-fields {
    display: none;
    padding-top: var(--space-2);
}

.group-fields.showing {
    display: block;
}

.group-seats {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    border: none;
}

.dialog-body .oauth-divider {
    color: var(--dialog-muted);
}

.dialog-body .oauth-divider::before,
.dialog-body .oauth-divider::after {
    border-bottom-color: var(--dialog-edge);
}

.button-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The shared button is a fixed 120px, which is fine for "Register" and wraps
 * "Save the password" onto two lines. In a dialog it takes the width of what
 * it says. */
.dialog-actions .button-action {
    width: auto;
    min-width: 7.5rem;
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
}

.modal-form {
    display: flex;
    height: 100%;
}

/* Below this, the 300px-wide ad creative (a real IAB "Medium Rectangle"
unit - its dimensions aren't ours to resize) no longer has room beside the
form, so stack them instead of squeezing both into one row. */
@media (max-width: 700px) {
    .modal-form {
        flex-direction: column;
    }

    .payment-methods,
    .player-details {
        width: 100%;
    }
}


.input-field {
    margin-bottom: var(--space-4); /* Add spacing between input fields */
}

.input-field label {
    display: block; /* Display labels as block elements */
    margin-bottom: var(--space-1); /* Add spacing below labels */
}

.input-field input,
.input-field textarea,
.input-field select {
    width: calc(100% - 24px); /* Calculate width to account for padding */
    padding: var(--space-2); /* Add padding to input fields */
    border: 1px solid #ccc; /* Add border for input fields */
    border-radius: 5px; /* Add border radius */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.input-field select {
    width: 100%; /* Select elements should span full width */
}


.cvv-input,
.expiry-input {
    display: inline-block; /* Make CVV and Expiry inputs display inline */
    width: calc(45% - 5px); /* Calculate width for CVV and Expiry inputs */
    margin-right: var(--space-2); /* Add margin between CVV and Expiry inputs */
    margin-bottom: var(--space-4);
}

.small-input{
    padding: var(--space-2); /* Add padding to input fields */
    border: 1px solid #ccc; /* Add border for input fields */
    border-radius: 5px; /* Add border radius */
    box-sizing: border-box; /* Include padding and border in width calculation */
}

.feature-table {
    padding: 40px;
    margin: var(--space-2);
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-sizing: border-box;
}

.feature-column {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 260px;
  }
  
.membership-image {
    border-radius: 10%;
    width: 240px;
    height:240px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    display: block;
    margin: 0 auto;
  
}

.feature-list {
    font-size: var(--type-body-01-size);
    line-height: var(--type-body-01-height);
    letter-spacing: var(--type-body-01-spacing);
    font-weight: 400;
    color:black;
}

ul {
    list-style-type:circle;
    padding: 0;
    flex-grow: 1;
    margin-bottom: 20px;
}
  
.decision {
    margin-top: auto;
}

.supplier-logo {
    height: 40px;
    margin: 3px;
}


.payment-methods{
    background-color: white;
    box-sizing: border-box;
    width: 45%;
}

.player-details{
    background-color: var(--dialog-inset);
    box-sizing: border-box;
    padding: 20px;
    width: 55%;
    display: flex;
    flex-grow: 1;
    flex-direction: column; /* Stack items vertically */
    justify-content: space-between; /* Distribute space evenly between items */
}

.payment-label {
    display: flex;
    align-items: center;
}

.payment-option{
    margin: 10px;
}

.payment-method-table{
    padding: 10px;
}

.failure{
    color: red;
    font-size: var(--type-label-01-size);
    line-height: var(--type-label-01-height);
    letter-spacing: var(--type-label-01-spacing);
}

/* Only once somebody has actually got it wrong. As `input:invalid` this
 * painted every required field red while it was still empty - which is to say
 * the whole form, before anyone had typed anything. */
input:user-invalid {
    border-color: red;
}

.membership-reminder{
    border-top: 2px solid #D8C385;
    padding-top: 20px;
}

.membership-fee {
    background: var( --game-button-background);
    color: white;
    font-size: var(--type-heading-04-size);
    line-height: var(--type-heading-04-height);
    font-weight: var(--type-heading-04-weight);
    text-align: center;
    width: 100%;
    padding: 30px;
}

/* The strength bar sits directly under the field it measures, the full width
 * of it, with the word for it on the right. Not there at all until there is a
 * password to measure - an empty track under an empty field is a line nobody
 * can read anything from. */
.password-container {
    display: none;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.password-container.showing {
    display: flex;
}

.password-strength {
    flex: 1 1 auto;
    background-color: var(--dialog-edge);
    border-radius: 6px;
}

.password-label {
    flex: 0 0 auto;
    min-width: 5.5rem;
    text-align: right;
    font-size: var(--type-label-01-size);
    line-height: var(--type-label-01-height);
    letter-spacing: var(--type-label-01-spacing);
    font-weight: 400;
    font-family: var(--main-font-face);
    color: var(--dialog-muted);
}
.password-bar {
    width: 1%;
    height: 12px;
    border-radius: 6px;
}

.toggle-eye-container {
    position: relative;
    display: inline-block;
    width: 100%; /* Adjust width as needed */
}

.toggle-eye-image {
    position: absolute;
    top: 4px;
    right: 30px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    cursor: pointer;
}
  
.toggle-eye-input {
    width: calc(100% - 24px); /* Set width of input box */
    height: 100%; /* Set height of input box */
}

/* The page between a correct password and a session.
 *
 * Deliberately bare. Somebody here has usually just been interrupted mid
 * sign-in and wants one thing from this page, so there is one thing on it. */
.mfa-challenge {
    max-width: 30rem;
    margin: 12vh auto 0;
    padding: 0 24px;
    text-align: center;
}

.mfa-challenge-title {
    font-family: var(--heading-font-face);
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--ink-cocoa);
    margin: 0 0 var(--space-2);
}

.mfa-challenge-prompt {
    font-family: var(--main-font-face);
    font-size: var(--type-body-02-size);
    line-height: var(--type-body-02-height);
    color: var(--ink-cocoa);
    margin: 0 0 var(--space-5);
}

/* Wide, spaced and monospaced: six digits read off another screen and
 * typed in one go, where a mistyped character has to be obvious. */
.mfa-code-input {
    display: block;
    width: 100%;
    margin: 0 auto 16px;
    padding: 12px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 1.6rem;
    letter-spacing: 0.35em;
    text-align: center;
    border: 2px solid rgba(74, 59, 42, 0.3);
    border-radius: var(--card-border-radius);
}

.mfa-code-input:focus {
    outline: none;
    border-color: var(--control-highlight, #4A3B2A);
}

.mfa-recovery-note {
    font-family: var(--main-font-face);
    font-size: var(--type-label-01-size);
    line-height: var(--type-label-01-height);
    letter-spacing: var(--type-label-01-spacing);
    line-height: 1.45;
    color: var(--ink-cocoa);
    opacity: 0.75;
    margin-top: var(--space-5);
}

/* Registration: one picture, everything layered on it.
 *
 * The image is the page. The title, the line under it and the three plans
 * all sit on top, and nothing else is on screen but the footer - so the
 * first thing a new person meets is a tarsier at a table with an empty
 * stool, rather than a price grid.
 *
 * The whole thing is full bleed: the page had a margin around it, which
 * left the picture floating in the background colour. */
html, body {
    margin: 0;
    padding: 0;
}

/* The page is the picture and the band under it, and nothing else. A column
 * that fills the window, with the hero taking whatever the footer does not -
 * measured rather than guessed, because subtracting an assumed footer height
 * leaves either a strip of page colour under the picture or a scrollbar,
 * depending which way the guess was wrong.
 *
 * dvh rather than vh so a phone's shrinking address bar does not open a gap
 * as it slides away. */
body {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    display: flex;
    flex-direction: column;
    /* Nothing should see this, but if a sliver ever shows it ought to be
     * the dark of the artwork rather than the parchment the rest of the
     * site uses. */
    background-color: #16120D;
}

.register-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    /* A floor, so the picture is never squeezed to a strip on a short
     * window - below this the page scrolls instead. */
    min-height: 32rem;
    overflow: hidden;
}

/* Covers the hero whatever shape the window is - wide and short, or tall
 * and narrow - rather than letterboxing into it. */
.register-hero-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Biased right and down, where the tarsier and the stools are. A centred
     * crop on a tall window loses him behind the foliage. */
    object-position: 62% 58%;
}

/* Across the top of the picture, on a wash of its own darkness - the sky in
 * that artwork is pale and bare white type disappears into it. */
.register-hero-heading {
    position: relative;
    z-index: 1;
    padding: clamp(20px, 5vh, 52px) 24px clamp(24px, 5vh, 48px);
    text-align: center;
    color: #fff;
    background: linear-gradient(to bottom,
                rgba(18, 13, 8, 0.72), rgba(18, 13, 8, 0));
}

.register-hero-title {
    font-family: var(--heading-font-face);
    font-size: clamp(1.9rem, 5vw, 3.2rem);
    line-height: 1.08;
    margin: 0 0 10px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.register-hero-body {
    font-family: var(--main-font-face);
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    line-height: 1.45;
    margin: 0 auto;
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* Down the left, in the space under the heading. Each one sits on its own
 * darkened panel rather than on a single block behind all three, so the
 * picture stays visible between them. */
.register-plans {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    flex: 1 1 auto;
    align-items: flex-start;
    width: min(24rem, calc(100% - 2.5rem));
    padding: 0 0 clamp(24px, 5vh, 48px) clamp(20px, 4vw, 48px);
}

/* One clickable target each, rather than a card with a button inside it -
 * on a phone a small button in a large card is mostly a way of missing. */
.plan {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    width: 100%;
    padding: 13px 16px;
    text-align: left;
    font: inherit;
    color: #fff;
    background: rgba(18, 13, 8, 0.66);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.plan:hover,
.plan:focus-visible {
    background: rgba(18, 13, 8, 0.82);
    border-color: #E85A4F;
}

.plan:focus-visible {
    outline: 2px solid #E85A4F;
    outline-offset: 2px;
}

/* Group, which is first and the one being recommended. */
.plan-featured {
    border-color: #E85A4F;
    border-width: 2px;
}

.plan-name {
    font-family: var(--heading-font-face);
    font-size: var(--type-heading-02-size);
    line-height: var(--type-heading-02-height);
    font-weight: var(--type-heading-02-weight);
}

.plan-price {
    font-family: var(--main-font-face);
    font-size: var(--type-body-01-size);
    line-height: var(--type-body-01-height);
    letter-spacing: var(--type-body-01-spacing);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: center;
    color: #FFD9A0;
}

.plan-summary {
    grid-column: 1 / -1;
    font-family: var(--main-font-face);
    font-size: var(--type-label-01-size);
    line-height: var(--type-label-01-height);
    letter-spacing: var(--type-label-01-spacing);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 720px) {
    .register-plans {
        width: 100%;
        padding-right: clamp(20px, 4vw, 48px);
    }
}

/* The band under the page. First footer on the site, so this is the pattern
 * the others should follow when they get one. */
.site-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 20px clamp(20px, 3vw, 40px);
    background-color: #16120D;
    color: #fff;
    font-family: var(--main-font-face);
    font-size: var(--type-label-01-size);
    line-height: var(--type-label-01-height);
    letter-spacing: var(--type-label-01-spacing);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.site-footer-links a {
    color: #fff;
    text-decoration: none;
    opacity: 0.82;
    border-bottom: 1px solid transparent;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    opacity: 1;
    border-bottom-color: #E85A4F;
}

.site-footer-rights {
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}