.native-ciaobooking-widget {
padding: 20px;
border-radius: var(--border-radius);
background-color: var(--background-color, #f9f9f9);
box-sizing: border-box;
--primary-color: #424242;
--border-radius: 5px;
--text-color: #000;
--background-color: #f9f9f9;
--input-background: #fff;
--input-border-color: #ccc;
max-width: 100%;
}
.native-ciaobooking-form {
display: flex;
flex-wrap: wrap;
gap: 15px;
} .layout-inline .cb-form-row {
flex: 1 1 auto;
min-width: 150px;
}
.layout-column .cb-form-row {
flex: 1 1 100%;
}
.layout-inline {
display: flex;
flex-wrap: wrap;
gap: 15px;
} @media (max-width: 768px) {
.layout-inline {
flex-direction: column;
}
.layout-inline .cb-form-row {
flex: 1 1 100%;
}
} .cb-form-row {
box-sizing: border-box;
}
.cb-label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.cb-input-wrapper {
position: relative;
}
.cb-input-wrapper input {
width: 100%;
padding: 8px; border: 1px solid var(--input-border-color);
border-radius: var(--border-radius);
background-color: var(--input-background);
}
.cb-input-wrapper .cb-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
color: var(--primary-color);
}
.with-icons .cb-input-wrapper input {
padding-left: 40px;
}
.with-icons .cb-button-icon {
margin-right: 8px;
}
.cb-submit-button {
padding: 10px 20px;
border: none;
border-radius: var(--border-radius);
color: #fff;
cursor: pointer;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.cb-submit-button:hover {
opacity: 0.9;
}
.cb-submit-button.icon-text .cb-button-icon {
margin-right: 8px;
}
.cb-submit-button.text-only .cb-button-icon {
display: none;
}