/* RESET */  
* {  
    box-sizing: border-box;  
    margin: 0;  
    padding: 0;  
    font-family: Arial, Helvetica, sans-serif;  
}  

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
}

/* HEADER */  
.site-header {  
    background-size: cover;  
    background-position: center;  
    color: #fff;  
}  

.header-overlay {  
    background: rgba(0,0,0,0.45);  
}  

.header-top {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    padding: 20px 60px;  
}  

.logo {  
    font-size: 20px;  
    font-weight: bold;  
}  

.main-nav a {  
    color: #fff;  
    text-decoration: none;  
    margin-left: 22px;  
    font-weight: bold;  
}  

.main-nav a:hover {  
    text-decoration: underline;  
}  

.header-text {  
    text-align: center;  
    padding: 60px 20px 80px;  
}  

.header-text h1 {  
    font-size: 34px;  
    margin-bottom: 10px;  
}  

.header-text p {  
    font-size: 18px;  
}  

/* MAIN */  
.content {  
    max-width: 1200px;  
    margin: auto;  
    padding: 60px 20px;  
}  

/* DISCLAIMER PAGE CONTENT */  
.page-content {  
    max-width: 900px;  
    margin: 0 auto;  
    padding: 30px 20px 30px 30px;  
    border-left: 4px solid #2c2c2c;  
}  

.page-content p {  
    margin-bottom: 18px;  
    line-height: 1.6;  
    font-size: 16px;  
}  

/* INTRO SECTION (MOST PAGES) */  
.intro-section {  
    max-width: 900px;  
    margin: 0 auto 60px;  
    text-align: center;  
    padding: 30px 20px 30px 30px;  
    border-left: 4px solid #2c2c2c;  
}  

/* Better spacing for headings */  
.intro-section h2 {  
    margin-top: 26px;  
    margin-bottom: 12px;  
}  

/* Paragraph spacing */  
.intro-section p {  
    margin-bottom: 16px;  
    font-size: 17px;  
}  

.intro-link a {  
    font-weight: bold;  
    text-decoration: none;  
}  

/* GLOBAL LIST → TEXT SPACING FIX */
li + p,
li + strong,
li + b {
    margin-top: 12px;
    display: block;
}

/* BUY SECTION */  
.buy-section {  
    display: flex;  
    justify-content: center;  
    gap: 40px;  
    flex-wrap: wrap;  
}  

.buy-box {  
    border: 2px solid #333;  
    padding: 30px;  
    width: 340px;  
    text-align: center;  
}  

.buy-box h2 {  
    margin-bottom: 10px;  
}  

.buy-box p {  
    margin-bottom: 20px;  
}  

/* ONE-OFF DROPDOWN */  
.buy-box select {  
    width: 100%;  
    padding: 10px;  
    margin-bottom: 15px;  
    font-size: 15px;  
}  

/* ONE-OFF BUTTON */  
.buy-box button {  
    width: 100%;  
    padding: 12px;  
    font-size: 16px;  
    font-weight: bold;  
    background: #333;  
    color: #fff;  
    border: none;  
    cursor: pointer;  
}  

.buy-box button:disabled {  
    background: #aaa;  
    cursor: not-allowed;  
}  

/* FOOTER */  
.site-footer {  
    background: #1f1f1f;  
    color: #fff;  
    margin-top: 0px;  
    padding-top: 20px;  
    border-top: 1px solid rgba(255, 255, 255, 0.15);  
}  

.footer-inner {  
    max-width: 1200px;  
    margin: auto;  
    padding: 15px 20px;  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    text-align: left;  
}  

.footer-centre {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
}  

.footer-payments img {  
    height: 25px;  
    margin: 0 5px;  
}  

.footer-right a {  
    color: #fff;  
    text-decoration: none;  
}  

/* MOBILE */  
@media (max-width: 768px) {  
    .header-top {  
        flex-direction: column;  
        gap: 12px;  
    }  

    .footer-inner {  
        flex-direction: column;  
        gap: 8px;  
        text-align: center;  
    }  

    .buy-section {  
        flex-direction: column;  
        align-items: center;  
    }  

    .intro-section,  
    .page-content {  
        padding-left: 18px;  
    }  

    /* Ensure thank-you box fills screen vertically and centers content */
    .step-complete-box {
        min-height: 300px;  /* adjust if needed */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}  

/* Ensure footer stays at bottom */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
}

/* STEP DIVIDER */  
.step-divider {  
    margin: 50px 0 30px;  
    border-top: 2px solid rgba(0,0,0,0.2);  
}  

/* STEP COMPLETION FORM */  
.step-complete-box {  
    max-width: 900px;  
    margin: 60px auto 0;  
    padding: 25px;  
    border: 2px solid #333;  
    background: #fafafa;  
}  

.step-complete-box h3 {  
    margin-bottom: 15px;  
    font-size: 20px;  
    text-align: center;  
}  

.step-form-row {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 20px;  
    margin-bottom: 18px;  
}  

.step-form-group {  
    flex: 1;  
    min-width: 260px;  
}  

.step-form-group label {  
    display: block;  
    font-weight: bold;  
    margin-bottom: 6px;  
}  

.step-form-group select {  
    width: 100%;  
    padding: 10px;  
    font-size: 15px;  
}  

.step-submit {  
    text-align: center;  
    margin-top: 25px;  
}  

.step-submit button {  
    padding: 12px 30px;  
    font-size: 16px;  
    font-weight: bold;  
    background: #333;  
    color: #fff;  
    border: none;  
    cursor: pointer;  
}  

.step-submit button:hover {  
    background: #000;  
}
/* spacing for text following list items */
li + p,
li + strong,
li + b {
    margin-top: 12px;
    display: block;
}

/* spacing for bold text inside list items */
li > strong,
li > b {
    display: block;
    margin-top: 12px;
}

.step-pill,
.template-pill{
    padding:12px 16px;
    background-color: #f7f7f7;
    border-radius:6px;
    border:1px solid #ddd;
    transition: background-color 0.2s
ease;
}
.step-pill:hover,
.template-pill:hover {
    background-color:#dbe5ff;
}