form.wcpt-preview-form {
width: 100%;
margin: 20px auto 40px;
max-width: var(--wcpt-preview-template-max-width, 1400px);
}
form.wcpt-preview-form fieldset {
border: 1px solid #ddd;
padding: 10px 20px 20px;
border-radius: 4px;
max-width: 100%;
width: 100%;
background: #fff;
font-size: 16px;
color: #000;
margin: 0;
}
.wcpt-preview-form legend {
font-size: 16px;
font-weight: 600;
color: #23282d;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
width: auto;
margin: 0;
text-transform: capitalize;
}
.wcpt-preview-form .wcpt-preview-form-container {
display: flex;
gap: 20px;
align-items: flex-end;
}
.wcpt-preview-form .wcpt-preview-form-row {
flex: 1;
margin-bottom: 0;
}
.wcpt-preview-form label {
display: block;
margin-bottom: 0.5em;
color: #444;
font-weight: 500;
}
.wcpt-preview-form .wcpt-preview-form-shortcode-container {
position: relative;
flex: 2;
}
.wcpt-preview-form
:is(input[type="text"], input[type="submit"], button[type="button"], select) {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
line-height: 1.5em !important;
padding: 0 10px !important;
font-size: 16px !important;
height: 2.5em !important;
}
.wcpt-preview-form .wcpt-preview-form-shortcode-container input {
width: 100%;
padding: 8px 12px;
padding-right: 40px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
}
.wcpt-preview-form .wcpt-preview-form-shortcode-wrapper {
position: relative;
}
.wcpt-preview-form .wcpt-preview-form-template-dropdown-wrapper {
max-width: 250px;
}
.wcpt-preview-form .wcpt-preview-form-max-width-wrapper {
max-width: 200px;
}
.wcpt-preview-form .wcpt-preview-form-max-width-wrapper select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
margin: 0;
}
.wcpt-preview-form .wcpt-preview-form-reset-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #666;
cursor: pointer;
padding: 5px;
font-size: 16px;
}
.wcpt-preview-form .wcpt-preview-form-reset-icon:hover {
color: #23282d;
}
.wcpt-preview-form select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
margin: 0;
}
.wcpt-preview-form input[type="text"]:focus,
.wcpt-preview-form select:focus {
border-color: #0073aa;
box-shadow: 0 0 0 1px #0073aa;
outline: none;
}
.wcpt-preview-form input[type="submit"] {
padding: 8px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 15px;
line-height: 1em;
font-weight: 500;
text-transform: capitalize;
transition: background 0.2s ease;
height: 36px;
font-weight: 600;
}
.wcpt-preview-form input[type="submit"]:hover {
opacity: 0.9;
}
.wcpt-preview-form-theme-customizer-link {
margin-top: 0.2em;
display: flex;
align-items: center;
gap: 5px;
}
.wcpt-preview-form-shortcode-notice {
font-size: 14px;
color: #666;
margin-top: 10px;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
border-left: 4px solid #2196f3;
}
@media (max-width: 768px) {
.wcpt-preview-form .wcpt-preview-form-container {
flex-direction: column;
}
.wcpt-preview-form .wcpt-preview-form-container {
align-items: flex-start;
}
}  body > form.wcpt-preview-form {
display: none;
}