:root { --gap: 14px; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; margin:0; background:#f7f7f8; }
.container { max-width: 800px; margin: 40px auto; background:#fff; padding:24px; border-radius:16px; box-shadow:0 2px 20px rgba(0,0,0,.06); }
h1 { margin-top:0; }
label { display:block; font-weight:600; margin: 14px 0 6px; }
.input, select, textarea { width:100%; padding:12px; border:1px solid #ddd; border-radius:10px; font:inherit; }
.btn { margin-top:18px; padding:12px 18px; border:0; border-radius:12px; font-weight:700; cursor:pointer; background:#111; color:#fff; text-decoration:none; display:inline-block; }
.row { display:grid; grid-template-columns:1fr 1fr; gap: var(--gap); }
.row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.row > div {
    flex: 1;
    min-width: 0;  /* Prevents flex items from overflowing */
}

.input {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Adjust input widths for phone and email */
.row .input {
    max-width: 250px;  /* Limit maximum width */
}

.error { color:#8b1d1d; font-size:14px; margin-top:4px; }
.notice { margin-top:10px; color:#444; font-size:14px; }
table { width:100%; border-collapse: collapse; margin-top:20px; }
th, td { border-bottom:1px solid #eee; text-align:left; padding:8px; vertical-align: top; }

.conference-info {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.conference-info h2 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.conference-info h3 {
    color: #34495e;
    font-size: 1.2rem;
    margin: 1rem 0 0.5rem 0;
}

.conference-info ul {
    list-style-type: none;
    padding-left: 0;
}

.conference-info li {
    margin-bottom: 1rem;
}

.conference-info strong {
    color: #2c3e50;
}

.payment-info {
    background-color: #f8f9fa;
    padding: 1rem;
    margin: 1rem 0;
    border-left: 4px solid #0066cc;
    border-radius: 4px;
}

.payment-info h4 {
    margin-top: 0;
    color: #0066cc;
}

.payment-info ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.payment-info li {
    margin-bottom: 0.5rem;
}

.payment-qr-code {
    display: block;
    width: min(100%, 320px);
    height: auto;
    margin-top: 1rem;
}

.participation-options {
    margin: 2rem 0;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.participation-options label {
    display: block;
    margin-top: 1rem;
}

.participation-options select {
    width: auto;
    min-width: 100px;
}

.submit-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.confirmation-note {
    color: #666;
    font-size: 0.9rem;
    max-width: 400px;
    margin: 0;
}