.pio-multiple-options {
    width: 100%;
    display: inline-block;
}

.pio-multiple-options .td-line-item-field > label {
    width: 100%;
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
    color: #242424;
}

.pio-multiple-options .td-line-item-field .td-content {
    width: 100%;
    display: inline-block;
}

.pioLongText:active,
.pioLongText:focus,
.pioImage:active,
.pioImage:focus,
.pioShortText:focus,
.pioShortText:active,
.pioNumber:focus,
.pioNumber:active,
.pioEmail:focus,
.pioEmail:active,
.pioSelect:focus,
.pioSelect:active,
.pioDatePick:focus,
.pioDatePick:active,
.pioColorPicker:focus,
.pioColorPicker:active {
    border: none !important;
    outline: 0;
    box-shadow:
        0 0 0 0 #ffffff,
        0 0 0.4rem 0rem #1212124d !important;
    border-radius: 4px;
}

.pioShortText,
.pioLongText,
.pioNumber,
.pioEmail,
.pioSelect,
.pioImage,
.pioColorPicker,
.pioDatePick {
    color: #495057;
    width: 100%;
    height: 46px;
    font-size: 15px;
    line-height: 1.33;
    border-radius: 4px;
    padding: 10px 13px;
    font-weight: 400;
    display: block;
    background-clip: padding-box;
    background-color: #fff !important;
    border: 1px solid #999999 !important;
    transition: all 0.3s ease-in-out;
    box-shadow: none;
}

/* Hide number input spinners to match text input appearance
.pioNumber::-webkit-outer-spin-button,
.pioNumber::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pioNumber[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
} */

.td-line-item-field {
    margin-bottom: 1rem;
}

.td-line-item-field.pio-display-hidden {
    display: none !important;
}

textarea.pioLongText {
    height: auto;
}

.pioShortText::placeholder,
.pioLongText::placeholder,
.pioNumber::placeholder,
.pioEmail::placeholder,
.pioPhoneCountry::placeholder,
.pioPhone::placeholder,
.pioDatePick::placeholder {
    color: #b8bcc0;
    opacity: 1;
}

/* Select: placeholder option (first/empty value) and placeholder state */
.pioSelect option[value=""] {
    color: #b8bcc0;
}
.pioSelect:invalid {
    color: #b8bcc0;
}

/* Date/datetime picker: empty state hint text (same as other inputs' placeholder #b8bcc0) */
.pioDatePick:invalid::-webkit-datetime-edit-fields-wrapper,
.pioDatePick-start:invalid::-webkit-datetime-edit-fields-wrapper,
.pioDatePick-end:invalid::-webkit-datetime-edit-fields-wrapper {
    color: #b8bcc0;
}

/* Date range: layout and alignment when start/end are selected */
.pio-date-range-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.pio-date-range-wrapper .pio-date-input-wrap {
    flex: 1;
    min-width: 0;
}
.pio-date-range-wrapper .pioDatePick-start,
.pio-date-range-wrapper .pioDatePick-end {
    width: auto;
    box-sizing: border-box;
}
.pio-date-range-separator {
    flex-shrink: 0;
    font-size: 15px;
    color: #495057;
    font-weight: 400;
}
/* Ensure date inputs have room for calendar icon and consistent height */
.pioDatePick::-webkit-calendar-picker-indicator {
    margin-left: 4px;
    cursor: pointer;
    opacity: 0.7;
}
.pioDatePick {
    box-sizing: border-box;
}

/* Date picker: show formatted date in preview (native input is transparent overlay) */
.pio-date-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.pio-date-input-wrap .pioDatePick {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.pio-date-display {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 36px 10px 13px;
    font-size: 15px;
    line-height: 1.33;
    color: #495057;
    background-color: #fff;
    border: 1px solid #999999;
    border-radius: 4px;
    pointer-events: none;
    box-sizing: border-box;
}
.pio-date-display--placeholder {
    color: #b8bcc0;
}
.pio-date-calendar-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    pointer-events: none;
    z-index: 0;
}
.pio-date-calendar-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

span.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: #eee;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
}

.pioRadioButton {
    position: absolute;
    opacity: 0 !important;
    cursor: pointer;
}

label.pioRadioLabel {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    margin-right: 15px;
}

.pioRadioLabel input:checked ~ .checkmark:after {
    display: block;
}

.pioRadioLabel .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

.pioRadioLabel input:checked ~ .checkmark {
    background-color: #1572e8;
}

.pioError {
    border-color: red !important;
}

.pioRadioError {
    border: 1px solid red !important;
}

.pio-radio-option {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 8px;
    vertical-align: top;
}

/* Checkbox UI - same layout and styling as radio */
.pio-checkbox-option {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 8px;
    vertical-align: top;
}

label.pioCheckboxLabel {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    margin-right: 15px;
}

.pioCheckboxLabel .pioCheckBox {
    position: absolute;
    opacity: 0 !important;
    cursor: pointer;
}

.pioCheckboxLabel .checkmark.checkmark--checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: #eee;
    border-radius: 3px;
    transition: all 0.4s ease-in-out;
}

.pioCheckboxLabel input:checked ~ .checkmark.checkmark--checkbox {
    background-color: #1572e8;
}

.pioCheckboxLabel .checkmark.checkmark--checkbox:after {
    content: "";
    position: absolute;
    display: none;
    width: 6px;
    height: 11px;
    left: 50%;
    top: 50%;
    margin-left: -4px;
    margin-top: -9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pioCheckboxLabel input:checked ~ .checkmark.checkmark--checkbox:after {
    display: block;
}

.pioCheckboxLabel:has(.pioCheckBox.pioError) .checkmark.checkmark--checkbox {
    border: 1px solid red;
}

input[type="checkbox"].pioCheckBox {
    display: inline-block;
    width: auto;
    min-height: auto;
    margin-right: 0.5rem;
    appearance: checkbox;
    -moz-appearance: checkbox;
    -o-appearance: checkbox;
    -webkit-appearance: checkbox;
}

.pioCheckBox.pioError {
    outline: 1px solid red;
}

.pioCheckBox + label {
    margin-right: 10px;
}

/* NEW ADDED CSS */
.pio-error-text {
    color: #d72c0d;
    font-size: 12px;
    margin-top: 4px;
}

.pio-has-error .td-label {
    color: #d72c0d;
}

.pio-has-error input {
    border-color: #d72c0d;
}

.pio-char-counter {
    font-size: 12px;
    color: #6d7175;
    display: block;
    margin-top: 4px;
    transition: color 0.2s ease;
}

.pio-char-counter.is-max {
    color: #d72c0d;
}

.pio-help-text {
    font-size: 12px;
    color: #6d7175;
    margin-top: 4px;
    display: block;
}

.pio-tooltip {
    cursor: help;
    font-size: 12px;
    margin-left: 4px;
    color: #5c6ac4;
}

/* Custom tooltip design: dark background, white text, arrow (like second reference image) */
.pio-tooltip-wrap {
    position: relative;
    display: inline;
}
.pio-tooltip-content,
.pio-swatch-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 6px 10px;
    background: #2C333B;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    border-radius: 0;
    z-index: 1000;
}
.pio-tooltip-content::after,
.pio-swatch-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #2C333B transparent transparent transparent;
}
.pio-tooltip-wrap:hover .pio-tooltip-content {
    opacity: 1;
}
.pioImageSwatch,
.pioColorSwatch {
    position: relative;
}
.pioImageSwatch:hover .pio-swatch-tooltip,
.pioColorSwatch:hover .pio-swatch-tooltip {
    opacity: 1;
}

.pio-label-hidden .td-label {
    display: none !important;
}

.td-line-item-field {
    box-sizing: border-box;
    padding-right: 12px;
    float: left;
}

.pio-required {
    color: #d72c0d;
    font-weight: 600;
}

.pioSelect {
    width: 100%;
}

.pioSelect[multiple] {
    min-height: 80px;
}

/* Drop-zone */
.pio-file-dropzone {
    position: relative;
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 14px;
    border: 1px dashed #b8b8b8;
    border-radius: 6px;
    background: #fafafa;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.pio-file-dropzone:hover,
.pio-file-dropzone:focus-within {
    border-color: #4a90e2;
    background: #f4f8ff;
}

.pio-file-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    display: block;
    height: 100%;
    width: 100%;
}

.pio-file-dropzone .pio-file-button {
    display: inline-block;
    padding: 10px 16px;
    margin-top: 8px;
    border-radius: 4px;
    background: #e6f0ff;
    color: #1a56db;
    font-weight: 600;
    border: 1px solid #cdddfd;
    pointer-events: none;
}

.pio-file-dropzone .pio-file-help {
    display: block;
    margin-top: 6px;
    color: #666;
    font-size: 13px;
}

.pioError.pio-file-dropzone .pio-file-button {
    color: #d72c0d;
    border-color: #d72c0d;
    background: #ffe6e6;
}
  
  /* File list */
.pio-file-list {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}

.pio-file-card {
    display: grid;
    grid-template-columns: 64px 1fr 36px;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    background: #dbe9ff;
    color: #1a1a1a;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.pio-file-thumb {
    width: 64px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    background: #fff;
}
.pio-file-name {
    margin: 0 10px;
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
}

.pio-file-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2b5fb8;
    color: #fff;
    border: 1px solid #dbe8ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pio-file-remove:hover {
    background: #244f98;
}
  
  /* Single file card (first block) can reuse same styles */
.pio-file-list.single .pio-file-card {
    grid-template-columns: 64px 1fr 36px;
}

.pio-button-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
}
  
.pioButton {
    width: auto !important;
    padding: 8px 16px !important;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #000000;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
  
.pioButton:hover {
    border-color: #b0b0b0;
    background: #f5f5f5;
}
  
.pioButton.pio-button-selected {
    background: #3578e5;
    border-color: #3578e5;
    color: #ffffff;
    font-weight: 700;
}
  
.pioButton.pio-button-selected:hover {
    background: #2b5fb8;
    border-color: #2b5fb8;
}

.pio-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}
  
.pio-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
  
.pio-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}
  
.pio-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0;
    transition: 0.3s;
    border-radius: 24px;
}
  
.pio-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
  
.pio-switch input:checked + .pio-switch-slider {
    background-color: #000000;
}
  
.pio-switch input:checked + .pio-switch-slider:before {
    transform: translateX(20px);
}
  
.pio-switch:hover .pio-switch-slider {
    background-color: #c0c0c0;
}
  
.pio-switch input:checked:hover + .pio-switch-slider {
    background-color: #333333;
}

.pio-phone-wrapper {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: 46px;
    background: #fff;
    border: 1px solid #999999;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.pio-phone-wrapper:focus-within {
    border: none !important;
    outline: 0;
    box-shadow: 0 0 0 0 #ffffff, 0 0 0.4rem 0rem #1212124d;
    border-radius: 4px;
}
.pio-phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-weight: 600;
    font-size: 15px;
    color: #495057;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
}
.pioPhoneCountry {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    padding: 10px 13px;
    border: none;
    border-right: 1px solid #e0e0e0;
    border-radius: 0;
    font-size: 15px;
    color: #495057;
    background: #fff;
    outline: none;
}
.pioPhone {
    flex: 1;
    min-width: 0;
    padding: 10px 13px;
    border: none;
    border-radius: 0;
    font-size: 15px;
    color: #495057;
    background: #fff;
    outline: none;
}

.pio-popup-trigger {
    padding: 10px 20px;
    background: #3578e5;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}
  
.pio-popup-trigger:hover {
    background: #2b5fb8;
}
  
.pio-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
  
.pio-modal-overlay.pio-modal-active {
    display: flex;
}
  
.pio-modal-content {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    max-width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}
  
.pio-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
}
  
.pio-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}
  
.pio-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px !important;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.pio-modal-close:hover {
    color: #000;
}
  
.pio-modal-body {
    padding: 15px;
    max-height: calc(90vh - 62px);
    overflow-y: auto;
}
  
.pio-modal-open {
    overflow: hidden;
}

.pio-swatch-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pio-swatch-container.pio-swatch-horizontal {
    flex-direction: row;
}

.pio-swatch-container.pio-swatch-vertical {
    flex-direction: column;
}

.pioImageSwatch {
    padding: 4px !important;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    max-width: fit-content;
}

.pioImageSwatch:hover {
    border-color: #b0b0b0;
    background: #f5f5f5;
}

.pioImageSwatch.pio-swatch-selected {
    border: 2px solid #000000;
    background: #ffffff;
}

.pioImageSwatch img {
    display: block;
    border-radius: 2px;
}

.pioImageSwatch span {
    font-size: 14px;
    color: #000000;
}

.pioColorSwatch {
    padding: 2px !important;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: fit-content;
}

.pioColorSwatch:hover {
    border-color: #b0b0b0;
}

.pioColorSwatch.pio-swatch-selected {
    border: 2px solid #000000;
}

.pio-color-swatch-box {
    display: block;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.pio-selected-value {
    font-size: 14px;
    color: #666;
    margin-top: 4px;
    margin-bottom: 8px;
    min-height: 20px;
}

/* Total options price line - visible only when total > 0 */
.pio-options-total-price-wrapper {
    margin-block: 16px;
    padding: 12px 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    font-size: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.pio-options-total-price-wrapper.pio-options-total-price--visible {
    display: flex !important;
}

.pio-options-total-price-label {
    color: #495057;
    font-weight: 500;
}

.pio-options-total-price-amount {
    color: #1572e8;
    font-weight: 700;
    font-size: 16px;
}

.td-line-item-field h1,
.td-line-item-field h2,
.td-line-item-field h3,
.td-line-item-field h4,
.td-line-item-field h5,
.td-line-item-field h6 {
    margin: 0;
    padding: 0;
}