.kcr-booking-public {
margin: 0;
background: #eef3f7;
color: #13213a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.kcr-public-wrap {
width: min(960px, calc(100% - 32px));
margin: 32px auto;
}
.kcr-public-panel {
background: #fff;
border: 1px solid #d8e1ea;
border-radius: 8px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 10px 28px rgba(20, 32, 54, .08);
}
.kcr-kicker {
margin: 0 0 8px;
color: #63ab45;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
letter-spacing: .04em;
}
.kcr-public-panel h1,
.kcr-public-panel h2 {
margin: 0 0 12px;
line-height: 1.25;
}
.kcr-public-muted {
color: #627084;
}
.kcr-public-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 18px 0;
}
.kcr-detail {
background: #f5f8fb;
border: 1px solid #dbe4ee;
border-radius: 8px;
padding: 12px;
}
.kcr-detail span,
.kcr-route span,
.kcr-totals span {
display: block;
color: #667085;
font-size: 15px;
}
.kcr-detail strong,
.kcr-route strong,
.kcr-totals strong {
display: block;
margin-top: 4px;
}
.kcr-totals strong {
text-align: right;
}
.kcr-route {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.kcr-route div {
border-left: 4px solid #63ab45;
background: #f8fafc;
padding: 14px;
border-radius: 8px;
}
.kcr-public-table {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
}
.kcr-public-table th,
.kcr-public-table td {
border-bottom: 1px solid #e4eaf1;
padding: 10px;
text-align: left;
}
.kcr-public-table th:nth-child(2),
.kcr-public-table td:nth-child(2) {
text-align: center;
}
.kcr-public-table th:nth-child(3),
.kcr-public-table td:nth-child(3) {
text-align: right;
}
.kcr-totals {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 16px;
background: #f8fafc;
border: 1px solid #dbe4ee;
border-radius: 8px;
padding: 14px;
}
.kcr-terms {
margin-top: 14px;
color: #344054;
}
.kcr-quote-validity {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 8px;
color: #166534;
font-weight: 600;
margin-top: 14px;
padding: 10px 12px;
}
.kcr-quote-expired {
background: #fff7ed;
border-color: #fed7aa;
color: #9a3412;
}
.kcr-booking-meta {
display: grid;
gap: 6px;
margin: 4px 0 18px;
}
.kcr-booking-meta p {
margin: 0;
}
.kcr-button {
display: inline-block;
box-sizing: border-box;
background: #63ab45;
color: #fff;
text-decoration: none;
border-radius: 6px;
padding: 10px 16px;
font-weight: 700;
border: 0;
cursor: pointer;
}
.kcr-button-primary-action {
font-size: 17px;
min-height: 56px;
min-width: 270px;
padding: 15px 22px;
box-shadow: 0 8px 18px rgba(99, 171, 69, .24);
}
.kcr-button-secondary {
background: #f7921e;
color: #fff;
border: 1px solid #f7921e;
}
.kcr-button-danger {
background: #fff5f5;
color: #b42318;
border: 1px solid #fecaca;
}
.kcr-action-row {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
margin-top: 18px;
}
.kcr-action-row form {
margin: 0;
}
.kcr-action-row .kcr-button {
min-height: 56px;
min-width: 270px;
padding: 15px 22px;
font-size: 17px;
text-align: center;
}
.kcr-action-row .kcr-button-secondary,
.kcr-action-row .kcr-button-danger {
min-height: 56px;
padding: 15px 22px;
}
.kcr-button:focus,
.kcr-button:hover,
.kcr-button-secondary:focus,
.kcr-button-secondary:hover {
color: #fff;
}
.kcr-button-danger:focus,
.kcr-button-danger:hover {
color: #b42318;
}
.kcr-transfer-form-wrap {
color: #17233c;
}
.kcr-transfer-form {
background: #fff;
border: 1px solid #d8e1ea;
border-radius: 8px;
padding: 22px;
}
.kcr-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.kcr-transfer-form label {
display: block;
}
.kcr-transfer-form label span {
display: block;
font-weight: 600;
margin-bottom: 7px;
}
.kcr-transfer-form input,
.kcr-transfer-form textarea {
box-sizing: border-box;
width: 100%;
border: 1px solid #f5f8f7;
border-radius: 6px;
background: #f5f8f7;
color: #17233c;
padding: 13px 14px;
font: inherit;
}
.kcr-transfer-form input:focus,
.kcr-transfer-form textarea:focus {
border-color: #63ab45;
outline: 0;
box-shadow: 0 0 0 2px rgba(99, 171, 69, .16);
}
.kcr-transfer-form input:active,
.kcr-transfer-form textarea:active {
border-color: #63ab45;
}
.kcr-transfer-form textarea {
min-height: 150px;
resize: vertical;
}
.kcr-transfer-form .kcr-button {
font-size: 17px;
min-height: 56px;
min-width: 270px;
padding: 15px 22px;
}
.kcr-form-wide {
grid-column: 1 / -1;
}
.kcr-hp-field {
height: 0;
left: -9999px;
overflow: hidden;
position: absolute;
width: 0;
}
.kcr-form-success {
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 8px;
color: #065f46;
margin-bottom: 14px;
padding: 12px 14px;
}
.kcr-form-notice {
background: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 8px;
color: #9a3412;
margin-bottom: 14px;
padding: 12px 14px;
}
@media (max-width: 720px) {
.kcr-public-grid,
.kcr-route,
.kcr-form-grid {
grid-template-columns: 1fr;
}
.kcr-public-panel {
padding: 18px;
}
}