167 lines
2.7 KiB
CSS
167 lines
2.7 KiB
CSS
/* ── PAGE BASE ── */
|
|
body {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.checkout-page {
|
|
max-width: 100rem;
|
|
margin: 0 auto;
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
/* ── PAGE TITLE ── */
|
|
.checkout-page-title {
|
|
margin: 0 auto var(--space-6);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.checkout-page-title h1 {
|
|
font-size: var(--text-deal, 2.125rem);
|
|
font-weight: 900;
|
|
color: var(--gray-800);
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.checkout-layout {
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 3fr 1fr;
|
|
gap: var(--space-4);
|
|
align-items: start;
|
|
}
|
|
|
|
.checkout-form-card,
|
|
.checkout-summary-card {
|
|
background: white;
|
|
border: 0.0625rem solid var(--gray-200);
|
|
border-radius: var(--radius-xl);
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.checkout-title {
|
|
font-size: var(--text-3xl);
|
|
font-weight: 800;
|
|
margin-bottom: var(--space-4);
|
|
color: var(--gray-800);
|
|
}
|
|
|
|
.checkout-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.checkout-form input {
|
|
border: 0.0625rem solid var(--gray-200);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3);
|
|
font-size: var(--text-md);
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.checkout-form input:focus {
|
|
border-color: var(--blue);
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
flex: 1;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: var(--text-sm);
|
|
font-weight: 600;
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.form-group label span {
|
|
color: var(--red);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.form-group input {
|
|
border: 0.0625rem solid var(--gray-200);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-3);
|
|
font-size: var(--text-md);
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.form-group input:focus {
|
|
border-color: var(--blue);
|
|
box-shadow: 0 0 0 0.125rem rgba(26, 111, 212, 0.15);
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
@media (max-width: 56.25rem) {
|
|
.form-row {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.checkout-continue {
|
|
justify-content: center;
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.checkout-summary {
|
|
margin-top: var(--space-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: var(--text-md);
|
|
}
|
|
|
|
.total-row {
|
|
font-size: var(--text-xl);
|
|
font-weight: 800;
|
|
color: var(--red);
|
|
}
|
|
|
|
.qr-section {
|
|
margin-top: var(--space-6);
|
|
text-align: center;
|
|
}
|
|
|
|
.qr-wrapper {
|
|
margin-top: var(--space-3);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.qr-wrapper img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.qr-wrapper.blurred {
|
|
filter: blur(12px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 56.25rem) {
|
|
.checkout-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|