@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* =================================================================
   HOME - TERMS AND CONDITIONS - V2 LOOK
   File: termsAndConditionsV2.css
   Linked ONLY by Views/Home/TermsAndConditions.cshtml, after
   footerLinkCont.css (shared with Disclaimer, PrivacyPolicy,
   Partners and whoweare - left untouched).
   Every selector is scoped under .tnc-v2, which the view puts on
   section.pageNamePanel and section.notification_holder.
   Same look as disclaimerV2.css. Pure CSS - the copy and the
   "Back to Home" link are unchanged.
   ================================================================= */

/* -- Design tokens (same values as the EOI V2 pages) --------------- */
.tnc-v2 {
    --tnc-bg: #F4F6FB;
    --tnc-card: #FFFFFF;
    --tnc-primary: #0B2253;
    --tnc-blue: #1A6DDB;
    --tnc-blue-dk: #0B52B5;
    --tnc-text: #1A2740;
    --tnc-body: #475467;
    --tnc-border: #E2E8F0;
    --tnc-light: #EEF3FF;
    --tnc-focus: rgba(26,109,219,.35);
    --tnc-shadow: 0 18px 40px -18px rgba(11,34,83,.22);
    --tnc-shadow-sm: 0 1px 2px rgba(11,34,83,.06);
    --tnc-radius: 18px;
    --tnc-font: 'Manrope','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

.tnc-v2,
.tnc-v2 * {
    font-family: var(--tnc-font);
}

/* =================================================================
   0. CONTENT WIDTH - one 1340px column shared by title and card
   ================================================================= */
.pageNamePanel.tnc-v2 > .center,
.notification_holder.tnc-v2 > .center {
    width: 95%;
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .pageNamePanel.tnc-v2 > .center,
    .notification_holder.tnc-v2 > .center {
        width: calc(100% - 32px);
    }
}

/* =================================================================
   1. PAGE TITLE - plain navy heading with accent bar, no photo banner
   ================================================================= */
.pageNamePanel.tnc-v2 {
    background: var(--tnc-bg);
    padding-top: 65px; /* same as my-project.css: clears the fixed top bar */
}

    .pageNamePanel.tnc-v2 .center {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px 24px;
        padding-top: 44px;
        padding-bottom: 28px;
        text-align: left;
    }

        /* style.css clearfix would become a stray flex item */
        .pageNamePanel.tnc-v2 .center::after {
            display: none;
        }

    .pageNamePanel.tnc-v2 .pageName {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding: 0;
        font-size: 26px;
        line-height: 34px;
        font-weight: 800;
        letter-spacing: -0.4px;
        text-align: left;
        color: var(--tnc-primary);
    }

        .pageNamePanel.tnc-v2 .pageName::before {
            content: '';
            flex: 0 0 4px;
            width: 4px;
            height: 26px;
            border-radius: 4px;
            background: linear-gradient(180deg, var(--tnc-blue) 0%, #065b95 100%);
        }

    /* -- Back to Home: outline pill, CSS chevron (the old arrow
          sprite is white and disappears on the light title band) -- */
    .pageNamePanel.tnc-v2 .backNowBtn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        float: none;
        width: auto;
        height: 40px;
        margin: 0;
        padding: 0 18px 0 16px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
        color: var(--tnc-primary);
        background: var(--tnc-card);
        border: 1px solid var(--tnc-border);
        border-radius: 999px;
        box-shadow: var(--tnc-shadow-sm);
        white-space: nowrap;
        transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

        .pageNamePanel.tnc-v2 .backNowBtn::before {
            content: '';
            position: static;
            flex: 0 0 auto;
            width: 7px;
            height: 7px;
            background: none;
            border-left: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
            transition: transform .2s ease;
        }

        .pageNamePanel.tnc-v2 .backNowBtn:hover {
            color: var(--tnc-blue-dk);
            background: var(--tnc-light);
            border-color: var(--tnc-blue);
        }

            .pageNamePanel.tnc-v2 .backNowBtn:hover::before {
                background: none;
                transform: translateX(-2px) rotate(45deg);
            }

        .pageNamePanel.tnc-v2 .backNowBtn:focus-visible {
            outline: 3px solid var(--tnc-focus);
            outline-offset: 2px;
        }

        .pageNamePanel.tnc-v2 .backNowBtn:active {
            background: #E1EAFE;
            box-shadow: none;
        }

/* =================================================================
   2. CONTENT SECTION + DOCUMENT CARD
      Markup: h3 followed by one or more p / em / ul per clause.
   ================================================================= */
.notification_holder.tnc-v2 {
    background: var(--tnc-bg);
    padding: 0 0 64px;
}

    .notification_holder.tnc-v2 .termsAndConditionsCont {
        padding: 48px 56px 52px;
        background: var(--tnc-card);
        border: 1px solid var(--tnc-border);
        border-radius: var(--tnc-radius);
        box-shadow: var(--tnc-shadow);
        overflow-wrap: break-word;
        /* Numbers each h3 clause below as 01, 02, 03... (replaces a generic
           document icon repeated identically on every heading) - reads as
           an actual numbered legal document rather than the same icon
           pasted N times. */
        counter-reset: tnc-clause;
    }

        /* -- Clause headings -------------------------------------- */
        .notification_holder.tnc-v2 .termsAndConditionsCont h3 {
            display: flex;
            align-items: flex-start; /* badge stays on line 1 when the heading wraps */
            gap: 12px;
            margin: 0;
            padding: 0;
            font-size: 18px;
            line-height: 26px;
            font-weight: 700;
            color: var(--tnc-text);
            counter-increment: tnc-clause;
            scroll-margin-top: 90px; /* footer "#refund-and-cancellation" link clears the fixed top bar */
        }

            .notification_holder.tnc-v2 .termsAndConditionsCont h3::before {
                content: counter(tnc-clause, decimal-leading-zero);
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 28px;
                width: 28px;
                height: 28px;
                margin-top: -1px; /* (26px line - 28px tile) / 2 */
                border-radius: 8px;
                background: var(--tnc-light);
                color: var(--tnc-blue);
                font-size: 11.5px;
                font-weight: 800;
                letter-spacing: 0.2px;
            }

            /* divider between clauses - a soft fade rather than a flat
               line, so it reads as a break in the document rather than a
               leftover <hr>. */
            .notification_holder.tnc-v2 .termsAndConditionsCont h3:not(:first-child) {
                position: relative;
                margin-top: 28px;
                padding-top: 29px;
            }

                .notification_holder.tnc-v2 .termsAndConditionsCont h3:not(:first-child)::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: linear-gradient(90deg, var(--tnc-border) 0%, var(--tnc-border) 65%, transparent 100%);
                }

        /* -- Clause body: paragraphs, lead-in line and lists ------ */
        .notification_holder.tnc-v2 .termsAndConditionsCont p,
        .notification_holder.tnc-v2 .termsAndConditionsCont em,
        .notification_holder.tnc-v2 .termsAndConditionsCont ul {
            margin: 14px 0 0;
            padding: 0 0 0 40px; /* lines the copy up with the heading text: 28px tile + 12px gap */
        }

        .notification_holder.tnc-v2 .termsAndConditionsCont h3 + * {
            margin-top: 12px;
        }

        .notification_holder.tnc-v2 .termsAndConditionsCont p {
            font-size: 16px;
            line-height: 28px;
            font-weight: 400;
            color: var(--tnc-body);
        }

            .notification_holder.tnc-v2 .termsAndConditionsCont p b {
                font-weight: 700;
                color: var(--tnc-text);
            }

        .notification_holder.tnc-v2 .termsAndConditionsCont em {
            display: block;
            font-size: 16px;
            line-height: 28px;
            font-weight: 600;
            font-style: normal;
            color: var(--tnc-text);
        }

            .notification_holder.tnc-v2 .termsAndConditionsCont em + ul {
                margin-top: 8px;
            }

        .notification_holder.tnc-v2 .termsAndConditionsCont ul {
            list-style: none;
        }

            .notification_holder.tnc-v2 .termsAndConditionsCont ul li {
                position: relative;
                margin: 0;
                padding: 0 0 0 22px;
                font-size: 16px;
                line-height: 26px;
                font-weight: 400;
                color: var(--tnc-body);
            }

                .notification_holder.tnc-v2 .termsAndConditionsCont ul li + li {
                    margin-top: 10px;
                }

                .notification_holder.tnc-v2 .termsAndConditionsCont ul li::before {
                    left: 4px;
                    top: 10px; /* (26px line - 6px dot) / 2 */
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: var(--tnc-blue);
                }

/* -- Desktop: heading ABOVE its own copy, same as every other width -- this
      file used to grid headings into a left column and copy into a right
      one here; that read as two unrelated pieces of content side by side
      rather than a heading over its own paragraph, so it's removed in
      favour of the single stacked layout (section 2 above) at every width.
      Card stays the same full width as the title bar above it - only the
      layout direction changes, not the card's size. */
@media screen and (min-width: 1025px) {
    .notification_holder.tnc-v2 .termsAndConditionsCont {
        padding: 56px 64px 60px;
    }

        /* Full width, same as the rest of the card - the "premium" touch
           here is the bigger numbered badge and generous clause spacing,
           not a narrower text measure (that approach left too much dead
           space on a wide card and was dropped). */
        .notification_holder.tnc-v2 .termsAndConditionsCont h3 {
            font-size: 20px;
            line-height: 28px;
        }

            .notification_holder.tnc-v2 .termsAndConditionsCont h3::before {
                flex: 0 0 34px;
                width: 34px;
                height: 34px;
                margin-top: -3px; /* (28px line - 34px tile) / 2 */
                font-size: 13px;
            }

        .notification_holder.tnc-v2 .termsAndConditionsCont p,
        .notification_holder.tnc-v2 .termsAndConditionsCont em,
        .notification_holder.tnc-v2 .termsAndConditionsCont ul {
            padding-left: 46px; /* 34px badge + 12px gap, matches the wider heading badge above */
        }

        .notification_holder.tnc-v2 .termsAndConditionsCont h3:not(:first-child) {
            margin-top: 36px;
            padding-top: 37px;
        }
}

/* =================================================================
   3. RESPONSIVE
   ================================================================= */
@media screen and (max-width: 1024px) {
    .notification_holder.tnc-v2 .termsAndConditionsCont {
        padding: 40px 40px 44px;
    }
}

@media screen and (max-width: 768px) {
    .pageNamePanel.tnc-v2 .center {
        padding-top: 32px;
        padding-bottom: 22px;
    }

    .pageNamePanel.tnc-v2 .pageName {
        font-size: 22px;
        line-height: 30px;
    }

        .pageNamePanel.tnc-v2 .pageName::before {
            height: 22px;
        }

    .notification_holder.tnc-v2 {
        padding-bottom: 48px;
    }

        .notification_holder.tnc-v2 .termsAndConditionsCont {
            padding: 32px 28px 36px;
            border-radius: 16px;
        }

            .notification_holder.tnc-v2 .termsAndConditionsCont h3:not(:first-child) {
                margin-top: 26px;
                padding-top: 26px;
            }
}

@media screen and (max-width: 480px) {
    .pageNamePanel.tnc-v2 .center {
        padding-top: 24px;
        padding-bottom: 18px;
        gap: 14px;
    }

    .pageNamePanel.tnc-v2 .backNowBtn {
        height: 38px;
        font-size: 13px;
    }

    .notification_holder.tnc-v2 {
        padding-bottom: 36px;
    }

        .notification_holder.tnc-v2 .termsAndConditionsCont {
            padding: 24px 18px 28px;
            border-radius: 14px;
        }

            .notification_holder.tnc-v2 .termsAndConditionsCont h3 {
                font-size: 17px;
                line-height: 24px;
            }

                .notification_holder.tnc-v2 .termsAndConditionsCont h3::before {
                    margin-top: -2px; /* (24px line - 28px tile) / 2 */
                }

            .notification_holder.tnc-v2 .termsAndConditionsCont p,
            .notification_holder.tnc-v2 .termsAndConditionsCont em,
            .notification_holder.tnc-v2 .termsAndConditionsCont ul {
                padding-left: 0;
            }

            .notification_holder.tnc-v2 .termsAndConditionsCont p,
            .notification_holder.tnc-v2 .termsAndConditionsCont em,
            .notification_holder.tnc-v2 .termsAndConditionsCont ul li {
                font-size: 15px;
            }

            .notification_holder.tnc-v2 .termsAndConditionsCont p {
                line-height: 26px;
            }
}

@media (prefers-reduced-motion: reduce) {
    .pageNamePanel.tnc-v2 .backNowBtn,
    .pageNamePanel.tnc-v2 .backNowBtn::before {
        transition: none;
    }
}