/* Tabs */ #post-body-content .ui-tabs-nav { border-bottom: 1px solid #c3c4c7; } /* General styles for the repeater wrapper */ .wz-repeater-wrapper { position: relative; margin-bottom: 1.5rem; } /* Repeater items container */ .wz-repeater-wrapper .wz-repeater-item { display: flex; flex-direction: column; background: #f9f9f9; border: 1px solid #ddd; padding: 1rem; margin-bottom: 1rem; border-radius: 4px; } .wz-repeater-item .repeater-item-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 0.5rem; cursor: pointer; font-weight: bold; } /* Header for repeater field */ .wz-repeater-field-header { margin-bottom: 0.5rem; } .wz-repeater-field-label { font-weight: bold; font-size: 0.9rem; } /* Input field styles */ .wz-repeater-field-input { margin-bottom: 1rem; } /* Repeater item actions (buttons) */ .repeater-item-actions { display: flex; gap: 0.5rem; justify-content: flex-start; margin-top: 1rem; } .repeater-item-actions .button { display: inline-flex; align-items: center; gap: 0.25rem; } .repeater-item-actions .dashicons { font-size: 16px; } /* Move up/down button styles */ .repeater-item-actions .move-up, .repeater-item-actions .move-down { background: #f4f4f4; color: #333; border: 1px solid #ddd; border-radius: 3px; padding: 0.5rem; } .repeater-item-actions .move-up:hover, .repeater-item-actions .move-down:hover { background: #e0e0e0; } /* Remove button styles */ .repeater-item-actions .remove-item { background: #fdd; border-color: #fbb; } .repeater-item-actions .remove-item:hover { background: #fbb; } /* Add item button styling */ .wz-repeater-wrapper .add-item { background-color: #0073aa; color: #fff; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; margin-top: 1rem; } .wz-repeater-wrapper .add-item:hover { background-color: #005177; color: #fff; border-color: #004063; } /* Template styling for new items (hidden template) */ .repeater-template { display: none; } /* Responsiveness for smaller screens */ @media screen and (max-width: 768px) { .wz-repeater-wrapper { margin-bottom: 1rem; } .wz-repeater-item { flex-direction: column; } .repeater-item-actions { flex-direction: column; align-items: flex-start; } .repeater-item-actions .button { margin-bottom: 0.5rem; } } /* Field input responsive tweaks */ @media screen and (max-width: 480px) { .wz-repeater-field-label { font-size: 0.85rem; } .wz-repeater-field-input { font-size: 0.85rem; } .repeater-item-actions .button { font-size: 0.85rem; } .add-item { font-size: 1rem; padding: 0.5rem; } } /* Repeater Fields */ .wz-repeater-item { background: #fff; border: 1px solid #ccd0d4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); margin-bottom: 15px; border-radius: 3px; } .repeater-item-content { padding: 15px; } .wz-repeater-field { margin-bottom: 15px; } .wz-repeater-field:last-child { margin-bottom: 0; } .wz-repeater-field-header { margin-bottom: 8px; } .wz-repeater-field-label { display: block; font-weight: 600; margin-bottom: 4px; } .wz-repeater-field-description { color: #666; font-style: italic; margin: 4px 0 0; font-size: 13px; } .wz-repeater-field-input input[type="text"], .wz-repeater-field-input input[type="url"], .wz-repeater-field-input input[type="number"], .wz-repeater-field-input input[type="password"], .wz-repeater-field-input input[type="email"], .wz-repeater-field-input textarea, .wz-repeater-field-input select { width: 100%; max-width: 100%; } .repeater-item-footer { background: #f5f5f5; border-top: 1px solid #ddd; padding: 10px 15px; text-align: right; } .repeater-item-footer .remove-item { color: #b32d2e; } .repeater-item-footer .remove-item:hover { color: #dc3232; } .repeater-item-footer .dashicons { margin-top: 4px; } /* Required field indicator */ .required { color: #d63638; font-weight: bold; margin-left: 2px; font-size: 1.3em; } /* Tom Select Customizations */ .ts-wrapper.loading .spinner { display: inline-block; visibility: visible; float: none; margin: 5px auto; } .ts-wrapper .no-results { padding: 5px 10px; color: #666; font-style: italic; } .ts-wrapper.form-control { border: 1px solid #8c8f94; border-radius: 4px; min-height: 30px; } .ts-wrapper.focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: 2px solid transparent; } .ts-dropdown { border: 1px solid #8c8f94; border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .ts-dropdown .option { padding: 6px 10px; } .ts-dropdown .active { background-color: #2271b1; color: #fff; } .ts-wrapper.single.plugin-clear_button { position: relative; } .ts-wrapper.single .clear-button { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font-size: 2em; }