:root {
    --color-primary:   #2e5d3f;
    --color-accent:    #d97706;
    --color-light:     #e8f0e6;
    --color-text:      #2d2d2d;
    --color-text-light:#5f6b5f;
    --radius:          14px;
    --shadow:          0 6px 22px rgba(46,93,63,0.08);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Poppins', sans-serif;
    background: #f8f9f5;
    color: var(--color-text);
    line-height: 1.7;
}


.logo {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.logo::before { content: "🌿"; font-size: 1.3em; }


.checkout-box {
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem;
}
.btn-remove {
background: #ff4d4d;
color: #fff;
border: none;
padding: 6px 14px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: 0.3s;
}

.btn-remove:hover {
background: #e60000;
transform: scale(1.05);
}

h1, h2 { color: var(--color-primary); }

table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

th { background: var(--color-light); }

.form-group { margin-bottom: 1.4rem; }
label { display: block; margin-bottom: 6px; font-weight: 600; }
input, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

.btn-pay {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    width: 100%;
    margin-top: 1.5rem;
    transition: all 0.3s;
}

.btn-pay:hover { background: #244b32; }

/* Modal */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    align-items: center; justify-content: center;
    z-index: 2000;
}

.modal-box {
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.checkmark {
    width: 80px; height: 80px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    font-size: 3rem;
    line-height: 80px;
    margin: 0 auto 1.5rem;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.8rem;
}

.btn-modal {
    padding: 0.9rem 1.8rem;
    border: none;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
}

.btn-download { background: var(--color-accent); color: white; }
.btn-close    { background: #6c757d; color: white; }

/* Hidden receipt template for PDF */
#receipt-template {
    display: none;
    padding: 30px;
    background: white;
    font-family: 'Poppins', sans-serif;
}

#receipt-template h1 { color: var(--color-primary); text-align: center; }
#receipt-content { max-width: 700px; margin: 0 auto; }

@media (max-width: 600px) {
    .checkout-box { padding: 1.5rem; }
}