.shipping-container { padding-top: 0.5rem; .section { margin-bottom: 1rem; padding: 16px; border: 1px solid #e0e0e0; border-radius: 4px; h3 { margin: 0 0 0.9rem 0; color: var(--mat-sys-primary); font-weight: 500; } h4 { margin: 16px 0 8px; color: var(--mat-sys-primary); font-weight: 500; } .mat-mdc-card-content:first-child { padding: 0 16px; } } .checkbox-group { display: flex; flex-direction: row; gap: 8px; .formofsecurity { margin-left: 1rem; min-width: 300px; } } .radio-group { display: flex; gap: 16px; margin-bottom: 0.9rem; } .form-row { display: flex; gap: 16px; margin-bottom: 0.5rem; align-items: start; mat-form-field { flex: 1; margin-bottom: 6px; &.full-width { flex: 100%; } } .small-field { max-width: 120px; } } .form-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 0.9rem; } .presaved-address { padding: 10px; display: flex; flex-direction: row; gap: 8px; font-size: 0.875rem; p { margin: 0; margin-bottom: 4px; } .presaved-address-actions { margin-top: 8px; } } .delivery-estimate { color: #28a745; font-weight: 500; } } @media (max-width: 768px) { .shipping-container { .form-row { flex-direction: column; gap: 8px; mat-form-field { width: 100%; } } } }