/* ===== CHECKOUT CARD ===== */
.yc-form-card,
.checkout form {
background: #ffffff;
border-radius: 22px;
padding: 26px 22px;
box-shadow: 0 12px 35px rgba(0,0,0,0.08);
border: none;
}
/* ===== TITLE ===== */
.yc-form-title,
.checkout h2,
.checkout legend {
text-align: center;
font-size: 17px;
font-weight: 700;
margin-bottom: 22px;
color: #111;
position: relative;
}
/* small accent under title */
.yc-form-title::after,
.checkout h2::after,
.checkout legend::after {
content: "";
display: block;
width: 36px;
height: 3px;
background: #6fd3c3;
margin: 10px auto 0;
border-radius: 3px;
}
/* ===== INPUTS ===== */
.checkout input,
.checkout select {
width: 100%;
padding: 15px 16px;
border-radius: 14px;
border: 1px solid #e5e5e5;
background: #fafafa;
font-size: 15px;
transition: all 0.2s ease;
}
/* focus */
.checkout input:focus,
.checkout select:focus {
background: #ffffff;
border-color: #6fd3c3;
box-shadow: 0 0 0 3px rgba(111,211,195,0.22);
outline: none;
}
/* ===== FIELD SPACING ===== */
.checkout .form-group,
.checkout .field {
margin-bottom: 16px;
}
/* ===== BUTTON ===== */
.checkout button,
.checkout .order-btn,
.checkout .submit-btn {
width: 100%;
padding: 17px;
margin-top: 10px;
border-radius: 18px;
font-size: 17px;
font-weight: 800;
border: none;
background: linear-gradient(135deg, #6fd3c3, #4fb7a7);
color: #ffffff;
transition: all 0.25s ease;
}
/* hover */
.checkout button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(79,183,167,0.4);
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
.yc-form-card,
.checkout form {
padding: 22px 18px;
}
}
