/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/Alert/HvnlyNabAlert.css ***!
  \*********************************************************************************************************************************************************************************/
/* 
 * HvnlyNab Alert System - Guaranteed Smooth Animations
 * Force animations to work in React environment
 */

/* Overlay with forced animation */
.HvnlyNab_alert_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;

}

.HvnlyNab_alert_overlay--active {
  opacity: 1;
  visibility: visible;
  animation: HvnlyNabOverlayFadeIn 0.3s ease-out !important;
}

@keyframes HvnlyNabOverlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
  }
}

/* Main Container with forced elastic animation */
.HvnlyNab_alert_container {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  max-width: 440px;
  width: 90vw;
  transform: scale(0.7) translateY(-20px);
  opacity: 0;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.HvnlyNab_alert_container--active {
  opacity: 1;
  animation: HvnlyNabModalBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes HvnlyNabModalBounceIn {
  0% {
    transform: scale(0.7) translateY(-20px) rotateX(10deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.05) translateY(5px) rotateX(-2deg);
    opacity: 1;
  }
  75% {
    transform: scale(0.98) translateY(-2px) rotateX(1deg);
  }
  100% {
    transform: scale(1) translateY(0) rotateX(0);
    opacity: 1;
  }
}

/* Shake Effect - Forced to work */
.HvnlyNab_alert_shake {
  animation: HvnlyNabShakeEffect 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes HvnlyNabShakeEffect {
  0%, 100% { 
    transform: translateX(0) scale(1) rotate(0deg); 
  }
  10%, 30%, 50%, 70%, 90% { 
    transform: translateX(-4px) scale(1.01) rotate(-0.5deg); 
  }
  20%, 40%, 60%, 80% { 
    transform: translateX(4px) scale(1.01) rotate(0.5deg); 
  }
}

/* Progress Bar */
.HvnlyNab_alert_progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  width: 100%;
  transform-origin: left;
  animation: HvnlyNabProgressBar linear forwards !important;
}

@keyframes HvnlyNabProgressBar {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Header Section */
.HvnlyNab_alert_header {
  padding: 40px 35px 25px;
  text-align: center;
  position: relative;
}

/* Icon with guaranteed bounce animation */
.HvnlyNab_alert_icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  font-size: 32px;
  position: relative;
  opacity: 0;
  transform: scale(0) rotate(-180deg);
}

.HvnlyNab_alert_container--active .HvnlyNab_alert_icon {
  animation: HvnlyNabIconBounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards !important;
}

@keyframes HvnlyNabIconBounceIn {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
    opacity: 1;
  }
  75% {
    transform: scale(0.95) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.HvnlyNab_alert_icon::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  opacity: 0.3;
  transform: scale(0);
}

.HvnlyNab_alert_container--active .HvnlyNab_alert_icon::after {
  animation: HvnlyNabIconPulse 0.6s ease 0.8s forwards !important;
}

@keyframes HvnlyNabIconPulse {
  to {
    transform: scale(1);
  }
}

/* Icon Colors */
.HvnlyNab_alert_icon--success {
  background: linear-gradient(135deg, #48bb78, #38a169);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(72, 187, 120, 0.3);
}

.HvnlyNab_alert_icon--success::after {
  background: linear-gradient(135deg, #48bb78, #38a169);
}

.HvnlyNab_alert_icon--error {
  background: linear-gradient(135deg, #f56565, #e53e3e);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(245, 101, 101, 0.3);
}

.HvnlyNab_alert_icon--error::after {
  background: linear-gradient(135deg, #f56565, #e53e3e);
}

.HvnlyNab_alert_icon--warning {
  background: linear-gradient(135deg, #ed8936, #dd6b20);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(237, 137, 54, 0.3);
}

.HvnlyNab_alert_icon--warning::after {
  background: linear-gradient(135deg, #ed8936, #dd6b20);
}

.HvnlyNab_alert_icon--info {
  background: linear-gradient(135deg, #4299e1, #3182ce);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(66, 153, 225, 0.3);
}

.HvnlyNab_alert_icon--info::after {
  background: linear-gradient(135deg, #4299e1, #3182ce);
}

.HvnlyNab_alert_icon--question {
  background: linear-gradient(135deg, var(--hvnly-brand-primary) 0%, var(--hvnly-brand-secondary) 100%);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(159, 122, 234, 0.3);
}

.HvnlyNab_alert_icon--question::after {
  background: linear-gradient(135deg, var(--hvnly-brand-primary) 0%, var(--hvnly-brand-secondary) 100%);
}

/* Title with forced staggered animation */
.HvnlyNab_alert_title {
  font-size: 24px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 12px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(15px);
}

.HvnlyNab_alert_container--active .HvnlyNab_alert_title {
  animation: HvnlyNabTitleSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s forwards !important;
}

@keyframes HvnlyNabTitleSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Message with forced staggered animation */
.HvnlyNab_alert_message {
  color: #718096;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  opacity: 0;
  transform: translateY(15px);
}

.HvnlyNab_alert_container--active .HvnlyNab_alert_message {
  animation: HvnlyNabMessageSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards !important;
}

@keyframes HvnlyNabMessageSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Content Area */
.HvnlyNab_alert_content {
  padding: 0 35px 20px;
  opacity: 0;
  transform: translateY(15px);
}

.HvnlyNab_alert_container--active .HvnlyNab_alert_content {
  animation: HvnlyNabContentSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards !important;
}

@keyframes HvnlyNabContentSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Input Styling */
.HvnlyNab_alert_input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f7fafc;
  font-family: inherit;
  box-sizing: border-box;
}

.HvnlyNab_alert_input:focus {
  outline: none;
  border-color: #4299e1;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
  transform: translateY(-2px) scale(1.02);
}

/* Footer with Buttons */
.HvnlyNab_alert_footer {
  padding: 25px 35px 35px;
  display: flex;
  gap: 12px;
  justify-content: center;
  opacity: 0;
  transform: translateY(15px);
}

.HvnlyNab_alert_container--active .HvnlyNab_alert_footer {
  animation: HvnlyNabFooterSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s forwards !important;
}

@keyframes HvnlyNabFooterSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button Styles with Ripple Effects */
.HvnlyNab_alert_btn {
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 100px;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.HvnlyNab_alert_btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.HvnlyNab_alert_btn:hover::before {
  width: 300px;
  height: 300px;
}

.HvnlyNab_alert_btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.HvnlyNab_alert_btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* Button Variants */
.HvnlyNab_alert_btn--success {
  background: linear-gradient(135deg, #48bb78, #38a169);
  color: white;
}

.HvnlyNab_alert_btn--error {
  background: linear-gradient(135deg, #f56565, #e53e3e);
  color: white;
}

.HvnlyNab_alert_btn--warning {
  background: linear-gradient(135deg, #ed8936, #dd6b20);
  color: white;
}

.HvnlyNab_btn--info {
  background: linear-gradient(135deg, #4299e1, #3182ce);
  color: white;
}

.HvnlyNab_alert_btn--cancel {
  background: #f7fafc;
  color: #4a5568;
  border: 2px solid #e2e8f0;
}

.HvnlyNab_alert_btn--cancel:hover {
  background: #edf2f7;
  border-color: #cbd5e0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .HvnlyNab_alert_container {
    width: 92vw;
    margin: 20px;
    border-radius: 16px;
  }
  
  .HvnlyNab_alert_header {
    padding: 32px 25px 20px;
  }
  
  .HvnlyNab_alert_icon {
    width: 70px;
    height: 70px;
    font-size: 28px;
    margin-bottom: 20px;
  }
  
  .HvnlyNab_alert_title {
    font-size: 22px;
  }
  
  .HvnlyNab_alert_message {
    font-size: 15px;
  }
  
  .HvnlyNab_alert_footer {
    padding: 20px 25px 28px;
    flex-direction: column;
  }
  
  .HvnlyNab_alert_btn {
    width: 100%;
    padding: 16px 20px;
  }
}

/* WordPress Admin Compatibility */
@media (max-width: 782px) {
  .HvnlyNab_alert_overlay {
    top: 46px;
  }
}

@media (min-width: 783px) {
  .HvnlyNab_alert_overlay {
    top: 32px;
  }
}

/* Force animations to work - important flags */
.HvnlyNab_alert_overlay--active,
.HvnlyNab_alert_container--active,
.HvnlyNab_alert_container--active .HvnlyNab_alert_icon,
.HvnlyNab_alert_container--active .HvnlyNab_alert_title,
.HvnlyNab_alert_container--active .HvnlyNab_alert_message,
.HvnlyNab_alert_container--active .HvnlyNab_alert_content,
.HvnlyNab_alert_container--active .HvnlyNab_alert_footer {
  animation-fill-mode: both !important;
  animation-iteration-count: 1 !important;
}
/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/AddPropertyFormTab/ComponentPanel/ComponentPanel.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
/* Components Panel */
/* .hvnly--builder--int_api__property_builder_components {
  width: 280px;
  background: var(--hvnly-color-bg-light);
  border-right: 1px solid var(--hvnly-border-color);
  padding: 20px;
  overflow-y: auto;
} */

.hvnly--builder--int_api__property_builder_components h3 {
  font-size: 16px;
  margin-bottom: 5px;
  color: var(--hvnly-text-primary);
  font-weight: var(--hvnly-font-weight-semibold);
  /* font-family: var(--hvnly-headingFont); */
  padding-bottom: 10px;
  /* border-bottom: 1px solid var(--hvnly-border-color); */
}

.hvnly--builder--int_api__components_hint {
  font-size: 13px;
  color: var(--hvnly-text-secondary);
  margin-bottom: 15px;
  font-style: italic;
}

.hvnly--builder--int_api__property_builder_component_item {
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: grab;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}

.hvnly--builder--int_api__property_builder_component_item:hover {
  border-color: var(--hvnly-brand-primary);
  box-shadow: 0 4px 10px rgba(108, 96, 254, 0.1);
  transform: translateY(-2px);
}

.hvnly--builder--int_api__property_builder_component_item:active {
  transform: scale(0.95);
  box-shadow: 0 8px 20px rgba(108, 96, 254, 0.3);
}

.hvnly--builder--int_api__property_builder_component_item i {
  color: var(--hvnly-brand-primary);
  font-size: 16px;
  width: 20px;
}

/* Remove drag handle from component items */
.hvnly--builder--int_api__property_builder_component_item .hvnly--builder--int_api__drag_handle {
  display: none;
}

@media (max-width: 1024px) {


  .hvnly--builder--int_api__property_builder_components {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--hvnly-border-color);
  }
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/AddPropertyFormTab/Modal/Modal.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/* Modal Styles */
.hvnly--builder--int_api__property_builder_modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.hvnly--builder--int_api__property_builder_modal {
  background: var(--hvnly-color-bg-white);
  border-radius: 12px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.hvnly--builder--int_api__property_builder_modal_header {
  padding: 20px 25px;
  border-bottom: 1px solid var(--hvnly-border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--hvnly-color-bg-light);
}

.hvnly--builder--int_api__property_builder_modal_header h2 {
  font-size: 20px;
  font-weight: var(--hvnly-font-weight-semibold);
  font-family: var(--hvnly-headingFont);
}

.hvnly--builder--int_api__property_builder_modal_header button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder--int_api__property_builder_modal_body {
  padding: 25px;
}

.hvnly--builder--int_api__property_builder_modal_form_group {
  margin-bottom: 20px;
}

.hvnly--builder--int_api__property_builder_modal_label {
  display: block;
  margin-bottom: 8px;
  font-weight: var(--hvnly-font-weight-medium);
  color: var(--hvnly-text-primary);
}

.hvnly--builder--int_api__property_builder_modal_input {
    width: 100% !important;
    padding: 8px 16px !important;
    border: 1px solid var(--hvnly-border-color) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all var(--hvnly-transition-time) !important;
    background: var(--hvnly-color-bg-light) !important;    
    color: var(--hvnly-text-primary) !important;
}

.hvnly--builder--int_api__property_builder_modal_input:focus, 
.hvnly--builder--int_api__property_builder_modal_select:focus {
  outline: none;
  border-color: var(--hvnly-brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(108, 96, 254, 0.1) !important;
}

.hvnly--builder--int_api__property_builder_modal_select {
  width: 100% !important;
  padding: 8px 16px !important;
  border: 1px solid var(--hvnly-border-color) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  transition: all var(--hvnly-transition-time) !important;
  background: var(--hvnly-color-bg-light) !important;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: 100% !important;    
  color: var(--hvnly-text-primary) !important;
}

.hvnly--builder--int_api__property_builder_modal_footer {
  padding: 20px 25px;
  border-top: 1px solid var(--hvnly-border-color);
  text-align: right;
  background: var(--hvnly-color-bg-light);
}

.hvnly--builder--int_api__property_builder_modal_btn {
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: var(--hvnly-font-weight-semibold);
  font-family: var(--hvnly-headingFont);
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder--int_api__property_builder_modal_btn_primary {
  background: var(--hvnly-brand-primary);
  color: white;
  border: none;
  margin-left: 10px;
}

.hvnly--builder--int_api__property_builder_modal_btn_primary:hover {
  background: #5944f0;
}

.hvnly--builder--int_api__property_builder_modal_btn_secondary {
  background: var(--hvnly-color-bg-light);
  color: var(--hvnly-text-primary);
  border: 1px solid var(--hvnly-border-color);
}

.hvnly--builder--int_api__property_builder_modal_btn_secondary:hover {
  background: #f1f1f1;
}

/* Icon Search */
.hvnly--builder--int_api__icon_search {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.hvnly--builder--int_api__icon_search input {
  flex: 1;
}

.hvnly--builder--int_api__show_all_icons_btn {
  background: var(--hvnly-color-bg-light);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 6px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--hvnly-text-secondary);
  transition: all var(--hvnly-transition-time);
  white-space: nowrap;
}

.hvnly--builder--int_api__show_all_icons_btn:hover {
  background: var(--hvnly-brand-primary);
  color: white;
  border-color: var(--hvnly-brand-primary);
}

/* Enhanced Icon Picker */
.hvnly--builder--int_api__property_builder_icon_picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 10px;
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding: 5px;
}

.hvnly--builder--int_api__property_builder_icon_option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 5px;
  border: 1px solid var(--hvnly-border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--hvnly-transition-time);
  font-size: 12px;
  min-height: 80px;
}

.hvnly--builder--int_api__property_builder_icon_option:hover {
  border-color: var(--hvnly-brand-primary);
  background: rgba(108, 96, 254, 0.05);
  transform: translateY(-2px);
}

.hvnly--builder--int_api__property_builder_icon_option.selected {
  border-color: var(--hvnly-brand-primary);
  background: rgba(108, 96, 254, 0.1);
  box-shadow: 0 0 0 2px rgba(108, 96, 254, 0.2);
}

.hvnly--builder--int_api__property_builder_icon_option i {
  font-size: 24px;
  color: var(--hvnly-brand-primary);
  display: block;
  margin-bottom: 8px;
}

.hvnly--builder--int_api__property_builder_icon_option.selected i {
  color: var(--hvnly-brand-primary);
}

.icon-name {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--hvnly-text-secondary);
}

/* Checkmark for selected icon */
.icon-checkmark {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--hvnly-brand-primary);
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

.hvnly--builder--int_api__property_builder_icon_option.selected .icon-checkmark i{
    color: #fff
}

.hvnly--builder--int_api__property_builder_icon_option.selected .icon-checkmark {
  opacity: 1;
  transform: scale(1);
}

.icon-checkmark i {
  font-size: 12px;
  margin: 0;
  color: white;
}

.hvnly--builder--int_api__no_icons_found {
  text-align: center;
  color: var(--hvnly-text-secondary);
  font-style: italic;
  padding: 20px;
}






/* Wider Modal */
.hvnly--builder--int_api__property_builder_wide_modal {
  width: 700px;
  max-width: 90%;
}

/* Scrollable Preset Fields Container */
.hvnly--builder--int_api__preset_fields_container {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 10px;
}

.hvnly--builder--int_api__preset_fields_container::-webkit-scrollbar {
  width: 6px;
}

.hvnly--builder--int_api__preset_fields_container::-webkit-scrollbar-track {
  background: var(--hvnly-color-bg-light);
  border-radius: 3px;
}

.hvnly--builder--int_api__preset_fields_container::-webkit-scrollbar-thumb {
  background: var(--hvnly-border-color);
  border-radius: 3px;
}

.hvnly--builder--int_api__preset_fields_container::-webkit-scrollbar-thumb:hover {
  background: var(--hvnly-color-gray-500);
}






/* Responsive adjustments */
@media (max-width: 768px) {
  .hvnly--builder--int_api__property_builder_icon_picker {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .hvnly--builder--int_api__icon_search {
    flex-direction: column;
  }
  
  .hvnly--builder--int_api__show_all_icons_btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hvnly--builder--int_api__property_builder_icon_picker {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .hvnly--builder--int_api__property_builder_modal_body {
    padding: 15px;
  }
}


/* Add to your Modal.css file */

/* Editing Group Notice */
.hvnly--builder--int_api__editing_group_notice {
  display: flex;
  align-items: center;
  gap: var(--hvnly-space-md);
  padding: var(--hvnly-space-md) var(--hvnly-space-lg);
  background: var(--hvnly-color-bg-off-light);
  border-left: 4px solid var(--hvnly-brand-primary);
  border-radius: var(--hvnly-border-radius-sm);
  margin: var(--hvnly-space-md) 0;
  font-size: var(--hvnly-font-size-sm);
  color: var(--hvnly-text-primary);
}

.hvnly--builder--int_api__editing_group_notice i {
  font-size: var(--hvnly-font-size-lg);
  color: var(--hvnly-brand-primary);
}

/* Field Type Warning */
.hvnly--builder--int_api__field_type_warning {
  margin-top: var(--hvnly-space-sm);
  padding: var(--hvnly-space-sm) var(--hvnly-space-md);
  background: rgba(var(--hvnly-primary-rgb), 0.1);
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius-sm);
  color: var(--hvnly-text-primary);
  font-size: var(--hvnly-font-size-xs);
}

/* Group Replace Warning */
.hvnly--builder--int_api__group_replace_warning {
  margin-top: var(--hvnly-space-md);
  padding: var(--hvnly-space-md) var(--hvnly-space-lg);
  background: rgba(var(--hvnly-primary-rgb), 0.08);
  border-left: 4px solid var(--hvnly-brand-warning);
  border-radius: var(--hvnly-border-radius-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--hvnly-space-md);
}

.hvnly--builder--int_api__group_replace_warning i {
  color: var(--hvnly-brand-warning);
  font-size: var(--hvnly-font-size-lg);
  margin-top: 2px;
}

.hvnly--builder--int_api__group_replace_warning p {
  margin: 0;
  font-size: var(--hvnly-font-size-sm);
  color: var(--hvnly-text-primary);
  line-height: 1.5;
}

.hvnly--builder--int_api__group_replace_warning strong {
  color: var(--hvnly-text-primary);
  font-weight: var(--hvnly-font-weight-semibold);
}

/* Disabled option styling for field type select */
.hvnly--builder--int_api__property_builder_modal_select option:disabled {
  color: var(--hvnly-color-gray-500);
  background-color: var(--hvnly-color-gray-100);
}

/* Group field indicator in select */
.hvnly--builder--int_api__property_builder_modal_select option.group-field {
  font-weight: var(--hvnly-font-weight-medium);
  color: var(--hvnly-brand-primary);
}

/* Update the modal title for group editing */
.hvnly--builder--int_api__property_builder_modal_header h2 i.fa-layer-group {
  color: var(--hvnly-brand-secondary);
  margin-right: var(--hvnly-space-sm);
}

/* Enhanced group info banner for replacement warning */
.hvnly--builder--int_api__group_info_banner {
  position: relative;
  margin-bottom: var(--hvnly-space-md);
}

.hvnly--builder--int_api__group_replace_warning + .hvnly--builder--int_api__group_info_banner {
  margin-top: var(--hvnly-space-sm);
}
/*!**************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/AddPropertyFormTab/PlaceholderLoader/PlaceholderLoader.css ***!
  \**************************************************************************************************************************************************************************************************************************************************/
/* CustomPlaceholderLoader.css */

.hvnly-placeholder-loader {
  margin-bottom: 20px;
}

.hvnly-placeholder-tab {
  background-color: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius-sm);
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
}

.hvnly-placeholder-tab-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: var(--hvnly-color-bg-light);
  border-bottom: 1px solid var(--hvnly-border-color);
}

.hvnly-placeholder-tab-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-color: var(--hvnly-border-color);
  border-radius: 3px;
}

.hvnly-placeholder-tab-title {
  height: 18px;
  background-color: var(--hvnly-border-color);
  border-radius: 3px;
  flex: 1;
}

.hvnly-placeholder-tab-actions {
  display: flex;
  margin-left: 10px;
}

.hvnly-placeholder-action {
  width: 24px;
  height: 24px;
  margin-left: 5px;
  background-color: var(--hvnly-border-color);
  border-radius: 3px;
}

.hvnly-placeholder-tab-content {
  padding: 15px;
}

.hvnly-placeholder-field {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--hvnly-border-color);
}

.hvnly-placeholder-field:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.hvnly-placeholder-field-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.hvnly-placeholder-field-label {
  height: 16px;
  background-color: var(--hvnly-border-color);
  border-radius: 3px;
  flex: 1;
}

.hvnly-placeholder-field-actions {
  display: flex;
  margin-left: 10px;
}

.hvnly-placeholder-field-action {
  width: 20px;
  height: 20px;
  margin-left: 5px;
  background-color: var(--hvnly-border-color);
  border-radius: 3px;
}

.hvnly-placeholder-field-input {
  height: 14px;
  background-color: var(--hvnly-border-color);
  border-radius: 3px;
  width: 100%;
}

.hvnly-placeholder-field-input.short {
  width: 60%;
}

.hvnly-placeholder-field-input.medium {
  width: 80%;
}

/* Animation */
.hvnly-placeholder-tab::before,
.hvnly-placeholder-icon::before,
.hvnly-placeholder-tab-title::before,
.hvnly-placeholder-action::before,
.hvnly-placeholder-field-label::before,
.hvnly-placeholder-field-action::before,
.hvnly-placeholder-field-input::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: hvnly-placeholder-animation 1.5s infinite linear;
  z-index: 1;
}

@keyframes hvnly-placeholder-animation {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/AddPropertyFormTab/Field/Field.css ***!
  \**************************************************************************************************************************************************************************************************************************/
.hvnly--builder--int_api__property_builder_field {
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  cursor: grab;
  transition: all 0.2s ease;
}

.hvnly--builder--int_api__property_builder_field_info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.hvnly--builder--int_api__property_builder_field_info i {
  color: var(--hvnly-brand-primary);
  font-size: 16px;
  width: 20px;
}

.hvnly--builder--int_api__field_disabled_badge {
  background: var(--hvnly-color-bg-light);
  color: var(--hvnly-text-secondary);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 10px;
}

.hvnly--builder--int_api__property_builder_field_actions {
  display: flex;
  gap: 8px;
}

/* Field Mode Toggle */
.hvnly--builder--int_api__field_mode_toggle {
  display: flex;
  border-radius: var(--hvnly-border-radius-sm);
  overflow: hidden;
  border: 1px solid var(--hvnly-border-color);
  margin-bottom: 20px;
  background: var(--hvnly-color-bg-light);
}

.hvnly--builder--int_api__field_mode_btn {
  flex: 1;
  padding: 12px 15px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: var(--hvnly-font-weight-medium);
  transition: all var(--hvnly-transition-time);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder--int_api__field_mode_btn.active {
  background: var(--hvnly-brand-primary);
  color: white;
}

.hvnly--builder--int_api__field_mode_btn i {
  font-size: 14px;
}

/* Preset Categories Tabs */
.hvnly--builder--int_api__preset_categories {
  display: flex;
  border-bottom: 1px solid var(--hvnly-border-color);
  margin-bottom: 20px;
}

.hvnly--builder--int_api__preset_category_tab {
  padding: 10px 15px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: var(--hvnly-font-weight-medium);
  transition: all var(--hvnly-transition-time);
  margin-right: 5px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder--int_api__preset_category_tab.active {
  color: var(--hvnly-brand-primary);
  border-bottom-color: var(--hvnly-brand-primary);
}

.hvnly--builder--int_api__preset_category_tab:hover {
  color: var(--hvnly-brand-primary);
}

/* Preset Fields Header */
.hvnly--builder--int_api__preset_fields_header {
  margin-bottom: 15px;
}

.hvnly--builder--int_api__preset_search {
  position: relative;
}

.hvnly--builder--int_api__preset_search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hvnly-text-secondary);
}

.hvnly--builder--int_api__preset_search input {
  width: 100%;
  padding: 10px 10px 10px 40px;
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 14px;
  background: var(--hvnly-color-bg-light);
  color: var(--hvnly-text-primary);
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder--int_api__preset_search input:focus {
  outline: none;
  border-color: var(--hvnly-brand-primary);
  box-shadow: 0 0 0 3px rgba(108, 96, 254, 0.1);
}

/* Preset Fields List */
.hvnly--builder--int_api__preset_fields_list {
  max-height: 350px;
  overflow-y: auto;
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius-sm);
  margin-bottom: 15px;
  background: var(--hvnly-color-bg-white);
}

.hvnly--builder--int_api__preset_field_item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  border-bottom: 1px solid var(--hvnly-border-color);
  cursor: pointer;
  transition: background-color var(--hvnly-transition-time);
}

.hvnly--builder--int_api__preset_field_item:last-child {
  border-bottom: none;
}

.hvnly--builder--int_api__preset_field_item:hover {
  background-color: var(--hvnly-color-bg-light);
}

.hvnly--builder--int_api__preset_field_item.selected {
  background-color: rgba(108, 96, 254, 0.1);
}

.hvnly--builder--int_api__preset_field_item.in-use {
  opacity: 0.6;
  cursor: not-allowed;
}

.hvnly--builder--int_api__preset_field_checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius-sm);
  margin-right: 12px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--hvnly-color-bg-white);
  flex-shrink: 0;
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder--int_api__preset_field_item.selected .hvnly--builder--int_api__preset_field_checkbox {
  background-color: var(--hvnly-brand-primary);
  border-color: var(--hvnly-brand-primary);
  color: white;
}

.hvnly--builder--int_api__preset_field_info {
  flex: 1;
}

.hvnly--builder--int_api__preset_field_label {
  font-weight: var(--hvnly-font-weight-medium);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hvnly-text-primary);
}

.hvnly--builder--int_api__preset_field_label i {
  color: var(--hvnly-brand-primary);
}

.hvnly--builder--int_api__preset_field_description {
  font-size: 13px;
  color: var(--hvnly-text-secondary);
  margin-bottom: 6px;
}

.hvnly--builder--int_api__preset_field_type {
  font-size: 12px;
  color: var(--hvnly-color-gray-500);
}

.hvnly--builder--int_api__preset_field_status {
  margin-left: 10px;
  flex-shrink: 0;
}

.hvnly--builder--int_api__preset_field_in_use {
  font-size: 12px;
  color: var(--hvnly-brand-error);
  background: rgba(255, 77, 79, 0.1);
  padding: 4px 8px;
  border-radius: var(--hvnly-border-radius-sm);
}

/* No preset fields found */
.hvnly--builder--int_api__no_preset_fields_found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder--int_api__no_preset_fields_found i {
  font-size: 32px;
  margin-bottom: 10px;
}

.hvnly--builder--int_api__no_preset_fields_found p {
  margin: 0;
}

/* Selected Preset Fields */
.hvnly--builder--int_api__selected_preset_fields {
  border-top: 1px solid var(--hvnly-border-color);
  padding-top: 15px;
}

.hvnly--builder--int_api__selected_preset_fields h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--hvnly-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--hvnly-font-weight-medium);
}

.hvnly--builder--int_api__selected_preset_fields h4 i {
  color: var(--hvnly-brand-success);
}

.hvnly--builder--int_api__selected_preset_fields_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hvnly--builder--int_api__selected_preset_field_item {
  display: flex;
  align-items: center;
  background: rgba(108, 96, 254, 0.1);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--hvnly-text-primary);
}

.hvnly--builder--int_api__selected_preset_field_item i {
  margin-right: 6px;
  color: var(--hvnly-brand-primary);
}

.hvnly--builder--int_api__remove_preset_field_btn {
  background: none;
  border: none;
  color: var(--hvnly-text-secondary);
  margin-left: 6px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder--int_api__remove_preset_field_btn:hover {
  color: var(--hvnly-brand-error);
  background: rgba(255, 77, 79, 0.1);
}

/* Preset Field Badge */
.hvnly--builder--int_api__preset_badge {
  display: inline-flex;
  align-items: center;
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: var(--hvnly-font-weight-medium);
  margin-left: 8px;
}

.hvnly--builder--int_api__preset_badge i {
  font-size: 10px;
  margin-right: 4px;
}

/* Field Category */
.hvnly--builder--int_api__field_category {
  display: inline-flex;
  align-items: center;
  background: var(--hvnly-color-bg-light);
  color: var(--hvnly-brand-primary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: var(--hvnly-font-weight-medium);
  margin-right: 5px;
}

.hvnly--builder--int_api__field_category i {
  font-size: 10px;
  margin-right: 4px;
}

/* Preset Field Styling */
.hvnly--builder--int_api__preset_field {
  background: rgba(108, 96, 254, 0.05);
  border-left: 3px solid var(--hvnly-brand-primary);
}

.hvnly--builder--int_api__preset_field .hvnly--builder--int_api__field_label {
  color: var(--hvnly-brand-primary);
  font-weight: var(--hvnly-font-weight-semibold);
}

.hvnly--builder--int_api__preset_field .hvnly--builder--int_api__field_meta {
  color: var(--hvnly-text-secondary);
}

/* Required Badge */
.hvnly--builder--int_api__field_required_badge {
  background: rgba(0, 180, 106, 0.1);
  color: var(--hvnly-brand-success);
  padding: 3px 8px;
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 12px;
  margin-left: 10px;
}

/* Admin Badge */
.hvnly--builder--int_api__field_admin_badge {
  background: rgba(118, 75, 162, 0.1);
  color: var(--hvnly-brand-secondary);
  padding: 3px 8px;
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 12px;
  margin-left: 10px;
}

/* Placeholder */
.hvnly--builder--int_api__field_placeholder {
  color: var(--hvnly-text-secondary);
  font-size: 12px;
  margin-right: 5px;
}

/* Modal Checkbox Group */
.hvnly--builder--int_api__modal_checkbox_group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hvnly--builder--int_api__property_builder_modal_checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--hvnly-text-primary);
  font-weight: var(--hvnly-font-weight-regular);
}

.hvnly--builder--int_api__property_builder_modal_checkbox input {
  display: none;
}

.hvnly--builder--int_api__checkbox_custom {
  width: 18px;
  height: 18px;
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius-sm);
  margin-right: 10px;
  position: relative;
  transition: all var(--hvnly-transition-time);
  background: var(--hvnly-color-bg-light);
}

.hvnly--builder--int_api__property_builder_modal_checkbox input:checked + .hvnly--builder--int_api__checkbox_custom {
  background: var(--hvnly-brand-primary);
  border-color: var(--hvnly-brand-primary);
}

/* Required tab styling */
.hvnly--builder--int_api__required_tab {
  border-left: 4px solid var(--hvnly-brand-primary) !important;
  background-color: rgba(108, 96, 254, 0.1) !important;
}

.hvnly--builder--int_api__required_badge {
  background: var(--hvnly-brand-success);
  color: var(--hvnly-color-white);
  padding: 4px 10px;
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 0.75em;
  margin-left: 10px;
  font-weight: var(--hvnly-font-weight-medium);
  font-family: var(--hvnly-bodyFont);
}

.hvnly--builder--int_api__required_badge i {
    margin-right: 4px;
    font-size: 1em !important;
    color: #fff !important;
}

/* Locked field styling */
.hvnly--builder--int_api__locked_field {
  border-left: 4px solid var(--hvnly-brand-error) !important;
  background-color: rgba(255, 77, 79, 0.05) !important;
}

.hvnly--builder--int_api__locked_badge {
  background: var(--hvnly-brand-error);
  color: var(--hvnly-color-white);
  padding: 3px 8px;
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 0.7em;
  margin-left: 8px;
  font-weight: var(--hvnly-font-weight-medium);
  font-family: var(--hvnly-bodyFont);
}

.hvnly--builder--int_api__locked_badge i {
    margin-right: 3px;
    font-size: 0.75em;
    color: #fff;
}

/* Locked action buttons */
.hvnly--builder--int_api__locked_action_btn {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background-color: var(--hvnly-color-bg-light) !important;
  color: var(--hvnly-color-gray-500) !important;
  border-color: var(--hvnly-border-color) !important;
}

.hvnly--builder--int_api__locked_action_btn:hover {
  background-color: var(--hvnly-color-bg-light) !important;
  color: var(--hvnly-color-gray-500) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Disabled cursor for locked elements */
.hvnly--builder--int_api__drag_handle[style*="not-allowed"] {
  opacity: 0.6;
  background-color: var(--hvnly-color-bg-light);
}

.hvnly--builder--int_api__drag_handle[style*="not-allowed"]:hover {
  background-color: var(--hvnly-color-bg-light);
}

/* Lock icon in drag handle */
.hvnly--builder--int_api__drag_handle .fa-lock {
  color: var(--hvnly-brand-error);
  font-size: 0.9em;
}

/* ==========================================================================
   Enhanced Field Actions with Modern Design - UPDATED
   ========================================================================== */

/* Field action buttons styling - UPDATED with individual classes */
.hvnly--builder--int_api__property_builder_field_action_btn {
  background: var(--hvnly-color-bg-white);
  border: 1.5px solid var(--hvnly-border-color);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--hvnly-text-secondary);
  font-size: 12px;
  font-family: var(--hvnly-bodyFont);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  position: relative;
  overflow: hidden;
  margin: 0 2px;
}

.hvnly--builder--int_api__property_builder_field_action_btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

/* Individual button hover colors */
.hvnly--builder--int_api__property_builder_field_action_btn:hover {
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hvnly--builder--int_api__property_builder_field_action_btn:hover::before {
  left: 100%;
}

/* Toggle button */
.hvnly--builder--int_api__property_builder_field_action_btn.toggle-btn:hover {
  background: linear-gradient(135deg, var(--hvnly-status-rent), #00d0b8);
  box-shadow: 0 4px 12px rgba(0, 194, 168, 0.3);
}

/* Required button */
.hvnly--builder--int_api__property_builder_field_action_btn.required-btn:hover {
  background: linear-gradient(135deg, var(--hvnly-brand-success), #00d09c);
  box-shadow: 0 4px 12px rgba(0, 180, 106, 0.3);
}

/* Admin button */
.hvnly--builder--int_api__property_builder_field_action_btn.admin-btn:hover {
  background: linear-gradient(135deg, var(--hvnly-brand-primary), var(--hvnly-brand-secondary));
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.3);
}

/* Move up button */
.hvnly--builder--int_api__property_builder_field_action_btn.move-up-btn:hover {
  background: linear-gradient(135deg, var(--hvnly-status-pending), #ffc145);
  box-shadow: 0 4px 12px rgba(255, 181, 7, 0.3);
}

/* Move down button */
.hvnly--builder--int_api__property_builder_field_action_btn.move-down-btn:hover {
  background: linear-gradient(135deg, var(--hvnly-status-pending), #ffc145);
  box-shadow: 0 4px 12px rgba(255, 181, 7, 0.3);
}

/* Edit button */
.hvnly--builder--int_api__property_builder_field_action_btn.edit-btn:hover {
  background: linear-gradient(135deg, var(--hvnly-brand-primary), #7d70ff);
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.3);
}

/* Delete button */
.hvnly--builder--int_api__property_builder_field_action_btn.delete-btn:hover {
  background: linear-gradient(135deg, var(--hvnly-brand-error), #ff6b6b);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

/* Fix for hover state getting stuck - UPDATED */
.hvnly--builder--int_api__property_builder_field_action_btn:focus:not(:disabled) {
  outline: none;
  background: var(--hvnly-color-bg-white);
  color: var(--hvnly-text-secondary);
  border-color: var(--hvnly-border-color);
  transform: none;
  box-shadow: none;
}

.hvnly--builder--int_api__property_builder_field_action_btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}

/* Active state styling for toggle buttons */
.hvnly--builder--int_api__property_builder_field_action_btn_active {
  background: linear-gradient(135deg, var(--hvnly-brand-primary), var(--hvnly-brand-secondary)) !important;
  color: var(--hvnly-color-white) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.3) !important;
}

/* Ensure hover effect still works on active buttons */
.hvnly--builder--int_api__property_builder_field_action_btn_active:hover:not(:disabled):not(:active) {
  background: linear-gradient(135deg, var(--hvnly-brand-secondary), var(--hvnly-brand-primary)) !important;
  color: var(--hvnly-color-white) !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(108, 96, 254, 0.4) !important;
}

/* Disabled state styling */
.hvnly--builder--int_api__disabled_action_btn,
.hvnly--builder--int_api__property_builder_field_action_btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.hvnly--builder--int_api__disabled_action_btn:hover,
.hvnly--builder--int_api__property_builder_field_action_btn:disabled:hover {
  background: var(--hvnly-color-bg-white) !important;
  color: var(--hvnly-text-secondary) !important;
  border-color: var(--hvnly-border-color) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Locked action buttons */
.hvnly--builder--int_api__locked_action_btn {
  opacity: 0.4;
  cursor: not-allowed;
}

.hvnly--builder--int_api__locked_action_btn:hover {
  background: var(--hvnly-color-bg-white) !important;
  color: var(--hvnly-text-secondary) !important;
  border-color: var(--hvnly-border-color) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Tab action buttons - UPDATED */
.hvnly--builder--int_api__property_builder_tab_action_btn {
  background: var(--hvnly-color-bg-white);
  border: 1.5px solid var(--hvnly-border-color);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--hvnly-text-secondary);
  font-size: 13px;
  font-family: var(--hvnly-bodyFont);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 0 2px;
}

.hvnly--builder--int_api__property_builder_tab_action_btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.hvnly--builder--int_api__property_builder_tab_action_btn:hover:not(:disabled) {
  background: var(--hvnly-brand-primary);
  color: var(--hvnly-color-white);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.3);
}

.hvnly--builder--int_api__property_builder_tab_action_btn:hover::before {
  left: 100%;
}

.hvnly--builder--int_api__property_builder_tab_action_btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Updated Tooltip styles - positioned above buttons */
.hvnly--builder--int_api__property_builder_field_action_btn,
.hvnly--builder--int_api__property_builder_tab_action_btn {
  position: relative;
}

.hvnly--builder--int_api__property_builder_field_action_btn::after,
.hvnly--builder--int_api__property_builder_tab_action_btn::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hvnly-dark-bg-light);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all var(--hvnly-transition-time);
  margin-bottom: 6px;
  z-index: 1000;
}

.hvnly--builder--int_api__property_builder_field_action_btn:hover::after,
.hvnly--builder--int_api__property_builder_tab_action_btn:hover::after {
  opacity: 1;
}

/* Focus states for accessibility */
.hvnly--builder--int_api__property_builder_field_action_btn:focus,
.hvnly--builder--int_api__property_builder_tab_action_btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 96, 254, 0.3);
}

/* Responsive design */
@media (max-width: 768px) {
  .hvnly--builder--int_api__property_builder_field_action_btn {
    width: 36px;
    height: 36px;
    padding: 9px;
    margin: 0 1px;
  }
  
  .hvnly--builder--int_api__property_builder_field_action_btn i {
    font-size: 13px;
  }
  
  .hvnly--builder--int_api__property_builder_tab_action_btn {
    padding: 12px 14px;
    font-size: 14px;
  }
}



/* Field badges */
.hvnly--builder--int_api__field_required_badge {
  background: var(--hvnly-brand-success);
  color: var(--hvnly-color-white);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.65em;
  margin-left: 6px;
  font-weight: var(--hvnly-font-weight-medium);
}

.hvnly--builder--int_api__field_admin_badge {
  background: var(--hvnly-brand-primary);
  color: var(--hvnly-color-white);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.65em;
  margin-left: 6px;
  font-weight: var(--hvnly-font-weight-medium);
}

.hvnly--builder--int_api__field_disabled_badge {
  background: var(--hvnly-color-gray-500);
  color: var(--hvnly-color-white);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.65em;
  margin-left: 6px;
  font-weight: var(--hvnly-font-weight-medium);
}

.hvnly--builder--int_api__preset_badge {
  background: var(--hvnly-brand-accent);
  color: var(--hvnly-text-primary);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.65em;
  margin-left: 6px;
  font-weight: var(--hvnly-font-weight-medium);
}

/* Field meta info */
.hvnly--builder--int_api__field_placeholder,
.hvnly--builder--int_api__field_category {
  color: var(--hvnly-color-gray-500);
  font-size: 0.9em;
  margin-right: 10px;
  font-family: var(--hvnly-bodyFont);
}

.hvnly--builder--int_api__field_placeholder i,
.hvnly--builder--int_api__field_category i {
  margin-right: 4px;
  opacity: 0.7;
}

/* Add these CSS rules to your Field.css file */


/* Add to Field.css - Enhanced Field Styling */

/* Field Container */
.hvnly--builder--int_api__property_builder_field {
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.hvnly--builder--int_api__property_builder_field:hover {
  border-color: var(--hvnly-brand-primary);
  box-shadow: 0 2px 12px rgba(108, 96, 254, 0.08);
  transform: translateX(2px);
}

/* Field Info Area */
.hvnly--builder--int_api__property_builder_field_info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.hvnly--builder--int_api__property_builder_field_info > i {
  color: var(--hvnly-brand-primary);
  font-size: 18px;
  width: 24px;
  text-align: center;
}

/* Field Details */
.hvnly--builder--int_api__field_details {
  flex: 1;
}

.hvnly--builder--int_api__field_label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--hvnly-text-primary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Field Meta Information */
.hvnly--builder--int_api__field_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.7rem;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder--int_api__field_type {
  background: rgba(108, 96, 254, 0.08);
  padding: 2px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Group Position Indicator */
.hvnly--builder--int_api__group_position_indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  margin-right: 8px;
  background: rgba(108, 96, 254, 0.08);
  border-radius: 8px;
  padding: 4px 6px;
}

.hvnly--builder--int_api__group_position_number {
  font-size: 16px;
  font-weight: 700;
  color: var(--hvnly-brand-primary);
  line-height: 1.2;
}

.hvnly--builder--int_api__group_position_total {
  font-size: 10px;
  color: var(--hvnly-text-secondary);
}

/* Badges - Consistent styling */
.hvnly--builder--int_api__locked_badge,
.hvnly--builder--int_api__preset_badge,
.hvnly--builder--int_api__group_badge,
.hvnly--builder--int_api__field_required_badge,
.hvnly--builder--int_api__field_admin_badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 500;
}

.hvnly--builder--int_api__locked_badge {
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.hvnly--builder--int_api__preset_badge {
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
}

.hvnly--builder--int_api__group_badge {
  background: rgba(0, 180, 106, 0.1);
  color: #00b46a;
}

.hvnly--builder--int_api__field_required_badge {
  background: rgba(0, 180, 106, 0.1);
  color: #00b46a;
}

.hvnly--builder--int_api__field_admin_badge {
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
}

/* Field Actions - Better spacing */
.hvnly--builder--int_api__property_builder_field_actions {
  display: flex;
  gap: 6px;
}

.hvnly--builder--int_api__property_builder_field_action_btn {
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--hvnly-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hvnly--builder--int_api__property_builder_field_action_btn:hover {
  transform: translateY(-2px);
}

/* Disabled action buttons */
.hvnly--builder--int_api__disabled_action_btn {
  opacity: 0.4;
  cursor: not-allowed;
}

.hvnly--builder--int_api__disabled_action_btn:hover {
  transform: none;
  background: var(--hvnly-color-bg-white) !important;
  color: var(--hvnly-text-secondary) !important;
}
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/AddPropertyFormTab/Group/Group.css ***!
  \**************************************************************************************************************************************************************************************************************************/
/* Group Styles */
.hvnly--builder--int_api__property_builder_group {
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.hvnly--builder--int_api__property_builder_group_header {
  padding: 15px 20px;
  background: linear-gradient(135deg, rgba(108, 96, 254, 0.1), rgba(118, 75, 162, 0.1));
  border-bottom: 1px solid var(--hvnly-border-color);
  display: flex;
  align-items: center;
  cursor: grab;
}

.hvnly--builder--int_api__property_builder_group_header h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: var(--hvnly-font-weight-semibold);
  font-family: var(--hvnly-headingFont);
  flex: 1;
  margin: 0;
}

.hvnly--builder--int_api__property_builder_group_header h4 i {
  color: var(--hvnly-brand-primary);
  font-size: 16px;
  width: 20px;
}

.hvnly--builder--int_api__group_badge {
  background: var(--hvnly-brand-primary);
  color: var(--hvnly-color-white);
  padding: 4px 10px;
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 0.75em;
  margin-left: 10px;
  font-weight: var(--hvnly-font-weight-medium);
  font-family: var(--hvnly-bodyFont);
}

.hvnly--builder--int_api__property_builder_group_actions {
  display: flex;
  gap: 8px;
}

.hvnly--builder--int_api__property_builder_group_action_btn {
  background: var(--hvnly-color-bg-white);
  border: 1.5px solid var(--hvnly-border-color);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--hvnly-text-secondary);
  font-size: 13px;
  font-family: var(--hvnly-bodyFont);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hvnly--builder--int_api__property_builder_group_action_btn:hover {
  background: var(--hvnly-brand-error);
  color: var(--hvnly-color-white);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

.hvnly--builder--int_api__property_builder_group_content {
  padding: 15px;
}

.hvnly--builder--int_api__property_builder_group_content .hvnly--builder--int_api__property_builder_field {
  margin-left: 20px;
  border-left: 3px solid var(--hvnly-brand-primary);
  background: rgba(108, 96, 254, 0.03);
}

.hvnly--builder--int_api__property_builder_group_content .hvnly--builder--int_api__property_builder_field:last-child {
  margin-bottom: 0;
}

/* Group position indicator */
.hvnly--builder--int_api__group_position_indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  min-width: 40px;
}

.hvnly--builder--int_api__group_position_number {
  font-size: 18px;
  font-weight: var(--hvnly-font-weight-bold);
  color: var(--hvnly-brand-primary);
  line-height: 1;
}

.hvnly--builder--int_api__group_position_total {
  font-size: 11px;
  color: var(--hvnly-text-secondary);
  opacity: 0.7;
}

.hvnly--builder--int_api__group_position_text {
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
  padding: 2px 8px;
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 11px;
  margin-right: 5px;
}

/* Group field styling */
/* .hvnly--builder--int_api__group_field {
  position: relative;
}

.hvnly--builder--int_api__group_field::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--hvnly-brand-primary);
  border-radius: 50%;
} */

/* Updated Field.css additions */
.hvnly--builder--int_api__field_label .hvnly--builder--int_api__group_badge {
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: var(--hvnly-font-weight-medium);
  margin-left: 8px;
}

.hvnly--builder--int_api__field_label .hvnly--builder--int_api__group_badge i {
  font-size: 10px;
  margin-right: 4px;
}

/* Responsive design */
@media (max-width: 768px) {
  .hvnly--builder--int_api__property_builder_group_header {
    padding: 12px 15px;
  }
  
  .hvnly--builder--int_api__property_builder_group_content {
    padding: 10px;
  }
  
  .hvnly--builder--int_api__property_builder_group_content .hvnly--builder--int_api__property_builder_field {
    margin-left: 10px;
  }
  
  .hvnly--builder--int_api__group_position_indicator {
    min-width: 30px;
    margin-right: 10px;
  }
}

/* Group Styles - Add to existing Group.css */
.hvnly--builder--int_api__property_builder_group {
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.hvnly--builder--int_api__property_builder_group_header {
  padding: 15px 20px;
  background: linear-gradient(135deg, rgba(108, 96, 254, 0.1), rgba(118, 75, 162, 0.1));
  border-bottom: 1px solid var(--hvnly-border-color);
  display: flex;
  align-items: center;
  cursor: grab;
}

.hvnly--builder--int_api__property_builder_group_header h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: var(--hvnly-font-weight-semibold);
  font-family: var(--hvnly-headingFont);
  flex: 1;
  margin: 0;
}

.hvnly--builder--int_api__property_builder_group_header h4 i {
  color: var(--hvnly-brand-primary);
  font-size: 16px;
  width: 20px;
}

.hvnly--builder--int_api__group_badge {
  background: var(--hvnly-brand-primary);
  color: var(--hvnly-color-white);
  padding: 4px 10px;
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 0.75em;
  margin-left: 10px;
  font-weight: var(--hvnly-font-weight-medium);
  font-family: var(--hvnly-bodyFont);
}

.hvnly--builder--int_api__property_builder_group_actions {
  display: flex;
  gap: 8px;
}

.hvnly--builder--int_api__property_builder_group_action_btn {
  background: var(--hvnly-color-bg-white);
  border: 1.5px solid var(--hvnly-border-color);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--hvnly-text-secondary);
  font-size: 13px;
  font-family: var(--hvnly-bodyFont);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hvnly--builder--int_api__property_builder_group_action_btn.move-up-btn:hover {
  background: linear-gradient(135deg, var(--hvnly-status-pending), #ffc145);
  color: var(--hvnly-color-white);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 181, 7, 0.3);
}

.hvnly--builder--int_api__property_builder_group_action_btn.move-down-btn:hover {
  background: linear-gradient(135deg, var(--hvnly-status-pending), #ffc145);
  color: var(--hvnly-color-white);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 181, 7, 0.3);
}

.hvnly--builder--int_api__property_builder_group_action_btn.delete-btn:hover {
  background: var(--hvnly-brand-error);
  color: var(--hvnly-color-white);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

.hvnly--builder--int_api__property_builder_group_content {
  padding: 15px;
}

.hvnly--builder--int_api__property_builder_group_content .hvnly--builder--int_api__property_builder_field {
  margin-left: 20px;
  border-left: 3px solid var(--hvnly-brand-primary);
  background: rgba(108, 96, 254, 0.03);
}

.hvnly--builder--int_api__property_builder_group_content .hvnly--builder--int_api__property_builder_field:last-child {
  margin-bottom: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  .hvnly--builder--int_api__property_builder_group_header {
    padding: 12px 15px;
  }
  
  .hvnly--builder--int_api__property_builder_group_actions {
    gap: 4px;
  }
  
  .hvnly--builder--int_api__property_builder_group_action_btn {
    padding: 8px 10px;
    font-size: 12px;
  }
  
  .hvnly--builder--int_api__property_builder_group_content {
    padding: 10px;
  }
  
  .hvnly--builder--int_api__property_builder_group_content .hvnly--builder--int_api__property_builder_field {
    margin-left: 10px;
  }
}



/* Add to Group.css - Using existing Havenlytics root variables */

/* Sidebar toggle button styling */
.hvnly--builder--int_api__sidebar_toggle_btn {
  display: flex;
  align-items: center;
  gap: var(--hvnly-space-sm, 6px);
  padding: calc(var(--hvnly-space-xs, 4px) + 2px) var(--hvnly-space-md, 12px);
  background: var(--hvnly-color-gray-100, #f8f9fa);
  border: 1px solid var(--hvnly-border-color, #E4E4ED);
  border-radius: 20px;
  cursor: pointer;
  font-size: var(--hvnly-font-size-label, 0.8rem);
  font-family: var(--hvnly-font-family-base, "Poppins", sans-serif);
  font-weight: var(--hvnly-font-weight-medium, 500);
  transition: all var(--hvnly-transition-time, 0.3s ease);
  margin: 0 var(--hvnly-space-sm, 10px);
  color: var(--hvnly-text-primary, #1E1E2F);
}

.hvnly--builder--int_api__sidebar_toggle_btn:hover {
  background: var(--hvnly-color-gray-200, #e4e4ed);
}

.hvnly--builder--int_api__sidebar_toggle_btn.active {
  background: var(--hvnly-brand-primary, #6c60fe);
  border-color: var(--hvnly-brand-primary, #6c60fe);
  color: var(--hvnly-color-white, #ffffff);
}

.hvnly--builder--int_api__sidebar_toggle_btn.active i {
  color: var(--hvnly-color-white, #ffffff);
}

.hvnly--builder--int_api__sidebar_toggle_btn i {
  font-size: 14px;
  color: var(--hvnly-text-secondary, #555);
}

.hvnly--builder--int_api__sidebar_toggle_btn .toggle-label {
  font-weight: var(--hvnly-font-weight-medium, 500);
}

/* Sidebar status indicators using data attribute */
.hvnly--builder--int_api__property_docs_group[data-sidebar-status="visible"] {
  border-left: 3px solid var(--hvnly-brand-primary, #6c60fe);
}

.hvnly--builder--int_api__property_docs_group[data-sidebar-status="hidden"] {
  border-left: 3px solid var(--hvnly-brand-error, #FF4D4F);
  opacity: 0.9;
}

.hvnly--builder--int_api__property_docs_group[data-sidebar-status="hidden"] .hvnly--builder--int_api__property_builder_group_header {
  background: rgba(var(--hvnly-brand-error-rgb, 255, 77, 79), 0.02);
}

/* Sidebar status in collapsed view using data attribute */
.hvnly--builder--int_api__property_builder_group_collapsed_summary .sidebar-status {
  margin-left: var(--hvnly-space-sm, 10px);
  font-size: var(--hvnly-font-size-xs, 0.75rem);
  padding: calc(var(--hvnly-space-xs, 2px)) var(--hvnly-space-sm, 8px);
  background: var(--hvnly-color-gray-100, #f8f9fa);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: var(--hvnly-space-xs, 4px);
  color: var(--hvnly-text-secondary, #555);
  font-family: var(--hvnly-font-family-base, "Poppins", sans-serif);
}

.hvnly--builder--int_api__property_builder_group_collapsed_summary .sidebar-status[data-status="visible"] i {
  color: var(--hvnly-brand-primary, #6c60fe);
}

.hvnly--builder--int_api__property_builder_group_collapsed_summary .sidebar-status[data-status="hidden"] i {
  color: var(--hvnly-brand-error, #FF4D4F);
}

/* Property Documents group styling */
.hvnly--builder--int_api__property_docs_group .hvnly--builder--int_api__property_builder_group_header h4 i {
  color: var(--hvnly-brand-error, #FF4D4F);
}

/* Group info banner for documents */
.hvnly--builder--int_api__documents_info {
  background: rgba(var(--hvnly-brand-error-rgb, 255, 77, 79), 0.05);
  border-left: 3px solid var(--hvnly-brand-error, #FF4D4F);
  margin-top: var(--hvnly-space-sm, 10px);
  padding: var(--hvnly-space-md, 12px);
  border-radius: var(--hvnly-border-radius-sm, 4px);
  font-family: var(--hvnly-font-family-base, "Poppins", sans-serif);
  font-size: var(--hvnly-font-size-sm, 0.875rem);
  color: var(--hvnly-text-primary, #1E1E2F);
}

.hvnly--builder--int_api__documents_info i {
  color: var(--hvnly-brand-error, #FF4D4F);
  margin-right: var(--hvnly-space-sm, 8px);
}

.hvnly--builder--int_api__documents_info strong {
  font-weight: var(--hvnly-font-weight-semibold, 600);
  color: var(--hvnly-text-primary, #1E1E2F);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .hvnly--builder--int_api__sidebar_toggle_btn {
    background: var(--hvnly-dark-bg-light, #1E1E2F);
    border-color: var(--hvnly-dark-border, #444);
    color: var(--hvnly-dark-text-primary, #F0F0F0);
  }

  .hvnly--builder--int_api__sidebar_toggle_btn:hover {
    background: var(--hvnly-dark-bg-white, #252538);
  }

  .hvnly--builder--int_api__sidebar_toggle_btn.active {
    background: var(--hvnly-brand-primary, #6c60fe);
    border-color: var(--hvnly-brand-primary, #6c60fe);
    color: var(--hvnly-color-white, #ffffff);
  }

  .hvnly--builder--int_api__sidebar_toggle_btn i {
    color: var(--hvnly-dark-text-secondary, #B0B0B0);
  }

  .hvnly--builder--int_api__sidebar_toggle_btn.active i {
    color: var(--hvnly-color-white, #ffffff);
  }

  .hvnly--builder--int_api__property_builder_group_collapsed_summary .sidebar-status {
    background: var(--hvnly-dark-bg-light, #1E1E2F);
    color: var(--hvnly-dark-text-secondary, #B0B0B0);
  }

  .hvnly--builder--int_api__documents_info {
    background: rgba(var(--hvnly-brand-error-rgb, 255, 77, 79), 0.1);
    color: var(--hvnly-dark-text-primary, #F0F0F0);
  }

  .hvnly--builder--int_api__documents_info strong {
    color: var(--hvnly-dark-text-primary, #F0F0F0);
  }
}

/* Add to Group.css - Enhanced Group Styling */

/* Group Container - Better visual separation */
.hvnly--builder--int_api__property_builder_group {
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  position: relative;
}

.hvnly--builder--int_api__property_builder_group:hover {
  border-color: var(--hvnly-brand-primary);
  box-shadow: 0 4px 16px rgba(108, 96, 254, 0.08);
}

/* Group Header - Better visual feedback */
.hvnly--builder--int_api__property_builder_group_header {
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(108, 96, 254, 0.06), rgba(118, 75, 162, 0.04));
  border-bottom: 1px solid var(--hvnly-border-color);
  display: flex;
  align-items: center;
  cursor: grab;
  transition: background 0.2s ease;
}

.hvnly--builder--int_api__property_builder_group_header:active {
  cursor: grabbing;
}

/* Group Type Badge - More distinct */
.hvnly--builder--int_api__group_type_badge {
  background: rgba(108, 96, 254, 0.12);
  color: var(--hvnly-brand-primary);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: var(--hvnly-font-weight-semibold);
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 8px;
}

/* Group Field Content - Indentation visual */
.hvnly--builder--int_api__property_builder_group_content {
  padding: 16px;
  background: var(--hvnly-color-bg-white);
}

.hvnly--builder--int_api__property_builder_group_content .hvnly--builder--int_api__property_builder_field {
  margin-left: 28px;
  border-left: 3px solid var(--hvnly-brand-primary);
  background: rgba(108, 96, 254, 0.02);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.hvnly--builder--int_api__property_builder_group_content .hvnly--builder--int_api__property_builder_field:hover {
  background: rgba(108, 96, 254, 0.04);
  border-left-color: var(--hvnly-brand-secondary);
}

/* Group Collapse Button - Better visibility */
.hvnly--builder--int_api__group_collapse_btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--hvnly-text-secondary);
  padding: 6px 10px;
  margin-right: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hvnly--builder--int_api__group_collapse_btn:hover {
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
}

/* Group Field Count Badge */
.hvnly--builder--int_api__group_badge {
  background: var(--hvnly-brand-primary);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: var(--hvnly-font-weight-medium);
  margin-left: 10px;
}

/* Group Action Buttons - Consistent sizing */
.hvnly--builder--int_api__property_builder_group_action_btn {
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--hvnly-text-secondary);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hvnly--builder--int_api__property_builder_group_action_btn:hover {
  transform: translateY(-1px);
}

.hvnly--builder--int_api__property_builder_group_action_btn.move-up-btn:hover {
  background: linear-gradient(135deg, #ffc107, #ffb300);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.hvnly--builder--int_api__property_builder_group_action_btn.move-down-btn:hover {
  background: linear-gradient(135deg, #ffc107, #ffb300);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.hvnly--builder--int_api__property_builder_group_action_btn.delete-btn:hover {
  background: linear-gradient(135deg, #ff4d4f, #ff7875);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
}

/* Sidebar Toggle Button - More intuitive */
.hvnly--builder--int_api__sidebar_toggle_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--hvnly-color-gray-100);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 30px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-left: 12px;
  color: var(--hvnly-text-primary);
}

.hvnly--builder--int_api__sidebar_toggle_btn.active {
  background: var(--hvnly-brand-primary);
  border-color: var(--hvnly-brand-primary);
  color: white;
}

.hvnly--builder--int_api__sidebar_toggle_btn.active i {
  color: white;
}

/* Collapsed Summary - Better visual */
.hvnly--builder--int_api__property_builder_group_collapsed_summary {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--hvnly-color-bg-light);
  border-top: 1px solid var(--hvnly-border-color);
}

.hvnly--builder--int_api__group_expand_btn {
  background: transparent;
  border: none;
  color: var(--hvnly-brand-primary);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hvnly--builder--int_api__group_expand_btn:hover {
  background: rgba(108, 96, 254, 0.1);
}

/* Drag Handle for Groups */
.hvnly--builder--int_api__drag_handle {
  cursor: grab;
  margin-right: 12px;
  color: var(--hvnly-text-secondary);
  padding: 6px;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.hvnly--builder--int_api__drag_handle:hover {
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
}

.hvnly--builder--int_api__drag_handle:active {
  cursor: grabbing;
}
/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/AddPropertyFormTab/Group/GroupHelper.css ***!
  \********************************************************************************************************************************************************************************************************************************/
/* Group Helper Styles */
.hvnly-group-helper {
  background: linear-gradient(135deg, #f8f9ff, #f0f2ff);
  border-left: 4px solid var(--hvnly-brand-primary);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0 20px 28px;
  font-size: 0.85rem;
}

.hvnly-group-helper-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--hvnly-brand-primary);
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.hvnly-group-helper-header i {
  font-size: 1.1rem;
}

.hvnly-group-helper-desc {
  color: var(--hvnly-text-primary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.hvnly-group-helper-fields {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.hvnly-group-helper-fields li {
  padding: 6px 0;
  color: var(--hvnly-text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px dashed rgba(108, 96, 254, 0.1);
}

.hvnly-group-helper-fields li:last-child {
  border-bottom: none;
}

.hvnly-group-helper-tip {
  background: rgba(108, 96, 254, 0.1);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hvnly-brand-primary);
  font-size: 0.8rem;
  margin-top: 12px;
}

.hvnly-group-helper-tip i {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .hvnly-group-helper {
    margin-left: 12px;
    padding: 12px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .hvnly-group-helper {
    background: linear-gradient(135deg, rgba(108, 96, 254, 0.1), rgba(118, 75, 162, 0.08));
  }
  
  .hvnly-group-helper-fields li {
    border-bottom-color: rgba(108, 96, 254, 0.2);
  }
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/AddPropertyFormTab/Tab/Tab.css ***!
  \**********************************************************************************************************************************************************************************************************************/
/* Tab Item */
.hvnly--builder--int_api__property_builder_tab {
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.hvnly--builder--int_api__property_builder_tab_header {
  padding: 15px 20px;
  background: var(--hvnly-color-bg-light);
  border-bottom: 1px solid var(--hvnly-border-color);
  display: flex;
  align-items: center;
  cursor: grab;
}

.hvnly--builder--int_api__property_builder_tab_header h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: var(--hvnly-font-weight-semibold);
  font-family: var(--hvnly-headingFont);
  flex: 1;
  margin: 0;
}

.hvnly--builder--int_api__property_builder_tab_header h4 i {
  color: var(--hvnly-brand-primary);
  font-size: 16px;
  width: 20px;
}

.hvnly--builder--int_api__property_builder_tab_actions {
  display: flex;
  gap: 8px;
}

.hvnly--builder--int_api__property_builder_tab_action_btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hvnly-text-secondary);
  font-size: 14px;
  padding: 5px;
  border-radius: 4px;
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder--int_api__property_builder_tab_action_btn:hover {
  color: var(--hvnly-brand-primary);
  background: rgba(108, 96, 254, 0.1);
}

.hvnly--builder--int_api__property_builder_tab_content {
  padding: 20px;
}

.hvnly--builder--int_api__property_builder_tab_content .hvnly--builder--int_api__property_builder_empty_btn {
    background: var(--hvnly-brand-primary);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: var(--hvnly-font-weight-regular);
    font-family: var(--hvnly-headingFont);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all var(--hvnly-transition-time);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(108, 96, 254, 0.3);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: none;
}
.hvnly--builder--int_api__property_builder_tab_content
.hvnly--builder--int_api__property_builder_empty_btn i {
    font-size: 16px;
    margin: 0;
    color: #fff;
    transition: transform 0.3s ease;
}
/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/PropertyCard/components/layout/CardEditor.css ***!
  \*************************************************************************************************************************************************************************************************************************************/
/* Preview section */
.hvnly--builder---api_property__builder___preview_section {
  background: var(--hvnly-color-bg-white);
  border-radius: var(--hvnly-border-radius);
  box-shadow: var(--hvnly-shadow-card);
  padding: 25px;
  width: 100%;
  width: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Card Preview Styles */
.hvnly--builder---api_property__builder___single_page_card {
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius);
  overflow: hidden;
  background: var(--hvnly-color-bg-white);
  box-shadow: var(--hvnly-shadow-card);
  width: 100%;
  max-width: 100%;
  position: relative;
  transition: transform var(--hvnly-transition-time);
}

.hvnly--builder---api_property__builder___single_page_card:hover {
  transform: translateY(-3px);
}

.hvnly--builder---api_property__builder___single_page_card_header {
  position: relative;
  height: 340px;
  background: var(--hvnly-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hvnly-color-bg-white);
}

.hvnly--builder---api_property__builder___single_page_card_thumbnail {
  font-size: 50px;
  opacity: 0.7;
}

.hvnly--builder---api_property__builder___single_page_card_corner {
  position: absolute;
  padding: 8px;
  display: flex;
  gap: 5px;
  z-index: 5;
}

.hvnly--builder---api_property__builder___single_page_card_top_left {
  top: 10px;
  left: 10px;
}

.hvnly--builder---api_property__builder___single_page_card_top_right {
  top: 10px;
  right: 10px;
}

.hvnly--builder---api_property__builder___single_page_card_bottom_left {
  bottom: 10px;
  left: 10px;
}

.hvnly--builder---api_property__builder___single_page_card_bottom_right {
  bottom: 10px;
  right: 10px;
}

.hvnly--builder---api_property__builder__left-panel
.hvnly--builder---api_property__builder___single_page_card_header
.hvnly--builder---api_property__builder___single_page_card_badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 12px;
  font-weight: var(--hvnly-font-weight-medium);
  display: inline-block;
  color: var(--hvnly-color-bg-white);
}

.hvnly--builder---api_property__builder___single_page_card_body {
  padding: 20px;
}

.hvnly--builder---api_property__builder___single_page_card_avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--hvnly-border-color);
  margin: -45px 0 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--hvnly-color-bg-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  color: var(--hvnly-color-gray-500);
  font-size: 30px;
}

.hvnly--builder---api_property__builder___single_page_card_title_area {
  text-align: left;
  margin-bottom: 15px;
}

.hvnly--builder---api_property__builder___single_page_card_title_area h3 {
  font-size: 20px;
  color: var(--hvnly-text-primary);
  margin-bottom: 5px;
  font-weight: var(--hvnly-font-weight-semibold);
}

.hvnly--builder---api_property__builder___single_page_card_title_area .hvnly--builder---api_property__builder___single_page_card_rating {
  color: var(--hvnly-status-pending);
  font-size: 14px;
  text-align: left;
}

.hvnly--builder---api_property__builder___single_page_card_content_area {
  margin: 20px 0;
}

.hvnly--builder---api_property__builder___single_page_card_detail_item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder---api_property__builder___single_page_card_detail_item i {
  width: 24px;
  margin-right: 10px;
  color: var(--hvnly-brand-primary);
}

.hvnly--builder---api_property__builder___single_page_card_footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  background: var(--hvnly-color-bg-light);
  border-top: 1px solid var(--hvnly-border-color);
}

.hvnly--builder---api_property__builder___single_page_card_footer_left,
.hvnly--builder---api_property__builder___single_page_card_footer_right {
  display: flex;
  align-items: center;
}

/* Editable Areas */
.hvnly--builder---api_property__builder__left-panel .hvnly--builder---api_property__builder___editable_area {
  position: relative;
  min-height: 40px;
  border: 2px dashed #6c60fe4f;
  border-radius: var(--hvnly-border-radius-sm);
  padding: 5px;
  margin: 5px 0;
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder---api_property__builder___single_page_card_header .hvnly--builder---api_property__builder___editable_area {
  border: 2px dashed #fff;
}

/* Improved Add Element Button */
.hvnly--builder---api_property__builder___add_element_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  background-color: var(--hvnly-color-black);
  box-shadow: 0 2px 8px rgba(108, 96, 254, 0.3);
  color: var(--hvnly-color-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: all 0.2s ease;
  z-index: 10;
  border: none;
}

.hvnly--builder---api_property__builder___add_element_btn:hover {
  background-color: var(--hvnly-brand-secondary);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.4);
}

.hvnly--builder---api_property__builder___single_page_card_body .hvnly--builder---api_property__builder___add_element_btn, 
.hvnly--builder---api_property__builder___single_page_card_footer .hvnly--builder---api_property__builder___add_element_btn {
  background: var(--hvnly-color-black);
  color: var(--hvnly-color-bg-white);
}

.hvnly--builder---api_property__builder___editable_area:hover .hvnly--builder---api_property__builder___add_element_btn {
  opacity: 1;
}

.hvnly--builder---api_property__builder___area_label {
  position: absolute;
  top: -12px;
  left: 5px;
  font-size: 11px;
  color: var(--hvnly-color-gray-500);
  background: var(--hvnly-color-bg-white);
  padding: 2px 8px;
  border-radius: 4px 4px 0 0;
  opacity: 1;
  transition: opacity var(--hvnly-transition-time);
}

/* Preview Card Styles */
.hvnly--builder---api_property__builder___card_preview_container {
  background: var(--hvnly-color-bg-white);
  border-radius: var(--hvnly-border-radius);
  box-shadow: var(--hvnly-shadow-card);
  padding: 25px;
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hvnly--builder---api_property__builder___card_preview {
  width: 100%;
  max-width: 100%;
}

.hvnly--builder---api_property__builder___preview_card {
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius);
  overflow: hidden;
  background: var(--hvnly-color-bg-white);
  box-shadow: var(--hvnly-shadow-card);
  transition: transform var(--hvnly-transition-time);
  width: 100%;
}

.hvnly--builder---api_property__builder___preview_card:hover {
  transform: translateY(-3px);
}

.hvnly--builder---api_property__builder___preview_card_image {
  position: relative;
  height: 200px;
  background: #000;
  overflow: hidden;
}

.hvnly--builder---api_property__builder___preview_card_image_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80');
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}

.hvnly--builder---api_property__builder___preview_card_image_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

.hvnly--builder---api_property__builder___preview_card_image_left,
.hvnly--builder---api_property__builder___preview_card_image_right {
  display: flex;
  align-items: flex-start;
}

.hvnly--builder---api_property__builder___preview_card_tag {
  background: var(--hvnly-brand-accent);
  color: var(--hvnly-color-bg-white);
  padding: 5px 12px;
  border-radius: var(--hvnly-border-radius-sm);
  font-size: 12px;
  font-weight: var(--hvnly-font-weight-medium);
}

.hvnly--builder---api_property__builder___preview_card_image_right i {
  background: rgba(255, 255, 255, 0.2);
  color: var(--hvnly-color-bg-white);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--hvnly-transition-time);
  color: red;
}

.hvnly--builder---api_property__builder___preview_card_image_right i:hover {
  background: rgba(255, 255, 255, 0.3);
}

.hvnly--builder---api_property__builder___preview_card_below_image {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid var(--hvnly-border-color);
}

.hvnly--builder---api_property__builder___preview_card_below_left {
  display: flex;
  align-items: center;
}

.hvnly--builder---api_property__builder___preview_card_price {
  font-size: 20px;
  font-weight: var(--hvnly-font-weight-bold);
  color: var(--hvnly-brand-primary);
}

.hvnly--builder---api_property__builder___preview_card_below_right {
  display: flex;
  align-items: center;
}

.hvnly--builder---api_property__builder___preview_card_button {
  background: var(--hvnly-brand-primary);
  color: var(--hvnly-color-bg-white);
  border: none;
  border-radius: var(--hvnly-border-radius-sm);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: var(--hvnly-font-weight-medium);
  cursor: pointer;
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder---api_property__builder___preview_card_button:hover {
  background: var(--hvnly-brand-secondary);
}

.hvnly--builder---api_property__builder___preview_card_body {
  padding: 20px;
}

.hvnly--builder---api_property__builder___preview_card_title {
  font-size: 18px;
  font-weight: var(--hvnly-font-weight-semibold);
  color: var(--hvnly-text-primary);
  margin-bottom: 10px;
}

.hvnly--builder---api_property__builder___preview_card_rating {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: var(--hvnly-status-pending);
}

.hvnly--builder---api_property__builder___preview_card_rating i {
  color: var(--hvnly-status-pending);
  margin-right: 5px;
}

.hvnly--builder---api_property__builder___preview_card_rating span {
  font-size: 14px;
  margin-left: 5px;
}

.hvnly--builder---api_property__builder___preview_card_excerpt {
  color: var(--hvnly-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.hvnly--builder---api_property__builder___preview_card_footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  background: var(--hvnly-color-bg-light);
  border-top: 1px solid var(--hvnly-border-color);
}

.hvnly--builder---api_property__builder___preview_card_category,
.hvnly--builder---api_property__builder___preview_card_views {
  display: flex;
  align-items: center;
  color: var(--hvnly-text-secondary);
  font-size: 14px;
}

.hvnly--builder---api_property__builder___preview_card_category i,
.hvnly--builder---api_property__builder___preview_card_views i {
  margin-right: 8px;
  color: var(--hvnly-brand-primary);
}

/* Modal Styles - Updated for perfect centering */
.hvnly--builder---api_property__builder___widget_insert_modal_container {
  position: absolute;
  width: 330px;
  z-index: 100;
  display: none;
  top: 50;
  left: 50%;
  transform: translate(-50%, -0%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  border-radius: var(--hvnly-border-radius);
  overflow: hidden;
  background-color: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
}

.hvnly--builder---api_property__builder___widget_insert_modal_container.active {
  display: block;
}

.hvnly--builder---api_property__builder___option_card {
  width: 100%;
  border-radius: var(--hvnly-border-radius);
  overflow: hidden;
  background-color: var(--hvnly-color-bg-white);
}

.hvnly--builder---api_property__builder___option_card_header {
  background-color: var(--hvnly-brand-primary);
  border-radius: var(--hvnly-border-radius) var(--hvnly-border-radius) 0 0;
  padding: 0;
  margin: 0;
}

.hvnly--builder---api_property__builder___option_card_header_title_section {
  display: flex;
  align-items: center;
  color: var(--hvnly-color-bg-white);
  min-height: 50px;
  padding: 0 15px 0 20px;
}

.hvnly--builder---api_property__builder___option_card_header_title {
  flex-grow: 1;
  margin: 0;
  text-align: left;
  color: var(--hvnly-color-bg-white);
  font-size: 16px;
  font-weight: var(--hvnly-font-weight-semibold);
}

.hvnly--builder---api_property__builder___header_action_area {
  display: flex;
  padding: 0 0 0 10px;
  justify-content: center;
  align-items: center;
}

.hvnly--builder---api_property__builder___header_action_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  color: var(--hvnly-color-bg-white);
  transition: all var(--hvnly-transition-time);
  font-size: 18px;
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.hvnly--builder---api_property__builder___header_action_link:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hvnly--builder---api_property__builder___option_card_body {
  padding: 20px;
  background-color: var(--hvnly-color-bg-white);
  max-height: 350px;
  overflow-y: auto;
}

.hvnly--builder---api_property__builder___anchor_down {
  display: none;
}

.hvnly--builder---api_property__builder___field_options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hvnly--builder---api_property__builder___field_option {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius-sm);
  cursor: pointer;
  transition: all var(--hvnly-transition-time);
  background: var(--hvnly-color-bg-white);
}

.hvnly--builder---api_property__builder___field_option:hover {
  border-color: var(--hvnly-brand-primary);
  background-color: rgba(108, 96, 254, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.1);
}

.hvnly--builder---api_property__builder___field_icon {
  width: 40px;
  height: 40px;
  border-radius: var(--hvnly-border-radius-sm);
  background: rgba(108, 96, 254, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  flex-shrink: 0;
}

.hvnly--builder---api_property__builder___field_icon i {
  font-size: 20px;
  color: var(--hvnly-brand-primary);
}

.hvnly--builder---api_property__builder___field_info {
  flex-grow: 1;
}

.hvnly--builder---api_property__builder___field_info h4 {
  font-size: 15px;
  color: var(--hvnly-text-primary);
  margin-bottom: 0px;
  font-weight: var(--hvnly-font-weight-semibold);
  margin-top: 0;
}

.hvnly--builder---api_property__builder___field_info p {
  font-size: 12px;
  color: var(--hvnly-text-secondary);
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4;
}

.hvnly--builder---api_property__builder___info_text {
  text-align: center;
  color: var(--hvnly-text-secondary);
  padding: 25px 0;
  font-size: 15px;
}

/* Field wrapper with settings icon */
.hvnly--builder---api_property__builder___field_wrapper {
  position: relative;
  display: inline-block;
}

.hvnly--builder---api_property__builder___field_settings,
.hvnly--builder---api_property__builder___field_delete {
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hvnly-color-bg-white);
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all var(--hvnly-transition-time);
  z-index: 10;
  font-size: 10px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder---api_property__builder___field_settings {
  right: 25px;
}

.hvnly--builder---api_property__builder___field_delete {
  right: 0;
}

.hvnly--builder---api_property__builder___field_wrapper:hover .hvnly--builder---api_property__builder___field_settings,
.hvnly--builder---api_property__builder___field_wrapper:hover .hvnly--builder---api_property__builder___field_delete {
  opacity: 1;
}

.hvnly--builder---api_property__builder___field_settings:hover,
.hvnly--builder---api_property__builder___field_delete:hover {
  background: var(--hvnly-brand-primary);
  color: var(--hvnly-color-bg-white);
}

/* Rating stars styling */
.hvnly--builder---api_property__builder___single_page_card_rating i.filled,
.hvnly--builder---api_property__builder___preview_card_rating i.filled {
  color: var(--hvnly-status-pending);
}

/* Favorite icon active state */
.hvnly--builder---api_property__builder___single_page_card_badge i.fa-heart.active,
.hvnly--builder---api_property__builder___preview_card_image_right i.fa-heart.active,
.hvnly--builder---api_property__builder___preview_card_image_bottom_overlay i.fa-heart.active {
  color: red;
}

/* Bottom overlay for image */
.hvnly--builder---api_property__builder___preview_card_image_bottom_overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

/* Avatar area styling */
.hvnly--builder---api_property__builder___editable_area.avatar-area {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.hvnly--builder---api_property__builder___editable_area.avatar-area .hvnly--builder---api_property__builder___single_page_card_avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--hvnly-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--hvnly-color-bg-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  color: var(--hvnly-color-gray-500);
  font-size: 30px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.hvnly--builder---api_property__builder___editable_area.avatar-area .hvnly--builder---api_property__builder___field_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hvnly--builder---api_property__builder___editable_area.avatar-area .hvnly--builder---api_property__builder___field_settings,
.hvnly--builder---api_property__builder___editable_area.avatar-area .hvnly--builder---api_property__builder___field_delete {
  top: 10px;
}

.hvnly--builder---api_property__builder___editable_area.avatar-area .hvnly--builder---api_property__builder___field_settings {
  right: 40px;
}

.hvnly--builder---api_property__builder___editable_area.avatar-area .hvnly--builder---api_property__builder___field_delete {
  right: 10px;
}

.hvnly--builder---api_property__builder___editable_area.thumbnail-area .hvnly--builder---api_property__builder___single_page_card_badge {
  font-size: 50px;
  opacity: 0.7;
}

.hvnly--builder---api_property__builder___editable_area.thumbnail-area .hvnly--builder---api_property__builder___field_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hvnly--builder---api_property__builder___editable_area.thumbnail-area .hvnly--builder---api_property__builder___field_settings,
.hvnly--builder---api_property__builder___editable_area.thumbnail-area .hvnly--builder---api_property__builder___field_delete {
  top: 10px;
}

.hvnly--builder---api_property__builder___editable_area.thumbnail-area .hvnly--builder---api_property__builder___field_settings {
  right: 40px;
}

.hvnly--builder---api_property__builder___editable_area.thumbnail-area .hvnly--builder---api_property__builder___field_delete {
  right: 10px;
}

/* New area styles */
.hvnly--builder---api_property__builder___single_page_card_price_details_area,
.hvnly--builder---api_property__builder___single_page_card_schedule_tour_area,
.hvnly--builder---api_property__builder___single_page_card_features_area,
.hvnly--builder---api_property__builder___single_page_card_description_area,
.hvnly--builder---api_property__builder___single_page_card_location_area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.hvnly--builder---api_property__builder___single_page_card_features_area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Combined Avatar and Title Area - Flex Layout */
.hvnly--builder---api_property__builder___avatar_title_container {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

/* Avatar Area in Flex Container */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.avatar-area {
  flex: 0 0 auto;
  width: 80px;
  min-height: 80px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Title Area in Flex Container */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.title-area {
  flex: 1;
  min-height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Adjust avatar size in flex layout */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___single_page_card_avatar {
  width: 80px;
  height: 80px;
  margin: 0;
  font-size: 35px;
}

/* Adjust field wrapper in title area for better layout */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.title-area .field-renderer {
  margin-bottom: 5px;
}

/* Make title text larger in flex layout */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___single_page_card_badge {
  font-size: 14px;
  padding: 8px 12px;
}

/* Special styling for title text */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.title-area .field-renderer:first-child .hvnly--builder---api_property__builder___single_page_card_badge {
  font-size: 18px;
  font-weight: var(--hvnly-font-weight-bold);
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
}

/* Rating stars in flex layout */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.title-area .hvnly--builder---api_property__builder___single_page_card_badge i.fas.fa-star {
  color: #feca57;
  margin-right: 2px;
}

/* Location styling in flex layout */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.title-area .field-renderer:last-child .hvnly--builder---api_property__builder___single_page_card_badge {
  background: rgba(108, 96, 254, 0.05);
  color: var(--hvnly-text-secondary);
  border: 1px dashed var(--hvnly-border-color);
}

/* Area labels adjustment for flex container */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___area_label {
  position: absolute;
  top: -10px;
  background: var(--hvnly-color-bg-white);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--hvnly-color-gray-500);
  z-index: 5;
}

.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.avatar-area .hvnly--builder---api_property__builder___area_label {
  left: 5px;
}

.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.title-area .hvnly--builder---api_property__builder___area_label {
  left: 95px; /* avatar width + gap */
}

/* Add element button adjustments for flex layout */
.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___add_element_btn {
  opacity: 1;
}

.hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area:hover .hvnly--builder---api_property__builder___add_element_btn {
  opacity: 1;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .hvnly--builder---api_property__builder___avatar_title_container {
    flex-direction: column;
    gap: 10px;
  }
  
  .hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.avatar-area {
    width: 100%;
    min-height: 60px;
  }
  
  .hvnly--builder---api_property__builder___avatar_title_container .hvnly--builder---api_property__builder___editable_area.title-area .hvnly--builder---api_property__builder___area_label {
    left: 5px;
  }
}
/*!**************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/PropertyCard/components/layout/CardPreview.css ***!
  \**************************************************************************************************************************************************************************************************************************************/
/* Enhanced Preview Card Styles */
.hvnly--builder---api_property__builder___enhanced_card_preview_container {
  background: var(--hvnly-color-bg-white);
  border-radius: var(--hvnly-border-radius);
  box-shadow: var(--hvnly-shadow-card);
  padding: 25px;
  width: 100%;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;position: relative;
}

.hvnly--builder---api_property__builder___enhanced_card_preview {
  width: 100%;
  max-width: 100%;
}

.hvnly--builder---api_property__builder___enhanced_preview_card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: var(--hvnly-color-bg-white);
    box-shadow: var(--hvnly-shadow-card);
    transition: all 0.3s ease;
    width: 100%;
    border: 1px solid var(--hvnly-border-color);
}

.hvnly--builder---api_property__builder___enhanced_preview_card:hover {
  transform: translateY(-5px);
  /* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); */
}

/* Image Section */
.hvnly--builder---api_property__builder___enhanced_preview_card_image_section {
  position: relative;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_image {
  position: relative;
  height: 340px;
  background: #1e2238;
  overflow: hidden;
}

/* .hvnly--builder---api_property__builder___enhanced_preview_card_image_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80');
  background-size: cover;
  background-position: center;
  opacity: 0.9;
} */

.hvnly--builder---api_property__builder___enhanced_preview_card_image_overlay_top, .hvnly--builder---api_property__builder___enhanced_preview_card_image_overlay_bottom {
    position: absolute;
    left: 0;
    width: 95%;
    display: flex;
    justify-content: space-between;
    padding: 0px 0px;
    z-index: 2;
    text-align: center;
    margin: 0px auto;
    right: 0;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_image_overlay_top {
  top: 15px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_image_overlay_bottom {
  bottom: 15px;
}

/* .hvnly--builder---api_property__builder___enhanced_preview_card_image_left,
.hvnly--builder---api_property__builder___enhanced_preview_card_image_right {
  display: flex;
  align-items: flex-start;
  gap: 10px;
} */
.hvnly--builder---api_property__builder___enhanced_preview_card_image_left .hvnly--builder---api_property__builder___editable_area, .hvnly--builder---api_property__builder___enhanced_preview_card_image_right .top-right-area, .hvnly--builder---api_property__builder___editable_area.default.bottom-right-area{display: flex;align-items: flex-start;
    gap: 10px;}

.hvnly--builder---api_property__builder___enhanced_card_preview_container .hvnly--builder---api_property__builder___enhanced_preview_card_image .field-renderer {
  background: rgba(255, 255, 255, 0.9);
  color: var(--hvnly-brand-primary);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: var(--hvnly-font-weight-semibold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hvnly--builder---api_property__builder___enhanced_card_preview_container .hvnly--builder---api_property__builder___enhanced_preview_card_image_right 
.top-right-area .field-renderer {
    background:unset;
    color: red;
    padding: unset;
    border-radius: unset;
    font-size: unset;
    font-weight: unset;
    box-shadow: unset;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_favorite {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_favorite:hover {
  background: rgba(255, 255, 255, 0.3);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_favorite i {
color: #ff4757;
  font-size: 16px;
  transition: all 0.3s ease;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_favorite i.active {
  color: #ff4757;
}



.hvnly--builder---api_property__builder___enhanced_preview_card_share {
    width: 5px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_share {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hvnly--builder---api_property__builder___enhanced_preview_card_image_overlay_bottom 
.bottom-right-area 
.field-renderer
.hvnly--builder---api_property__builder___enhanced_preview_card_share
{  width: 4px;
    height: 18px;}
.hvnly--builder---api_property__builder___enhanced_preview_card_share i {
color: #ff4757;
  font-size: 16px;
  transition: all 0.3s ease;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_share i.active {
  color: #ff4757;
}
/* Price Section */
.hvnly--builder---api_property__builder___enhanced_preview_card_price_section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--hvnly-color-bg-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* .hvnly--builder---api_property__builder___enhanced_preview_card_price_container {
   display: flex;
  flex-direction: column; 
} */

.hvnly--builder---api_property__builder___enhanced_preview_card_price {
    font-size: 12px;
    font-weight: var(--hvnly-font-weight-bold);
    color: var(--hvnly-brand-primary);
    margin-bottom: 0;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_price_details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_price_details span {
  position: relative;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_price_details span:not(:last-child):after {
  content: "•";
  position: absolute;
  right: -8px;
  color: var(--hvnly-color-gray-500);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_button {
  background: var(--hvnly-brand-primary);
  color: var(--hvnly-color-bg-white);
  border: none;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: var(--hvnly-font-weight-medium);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_button:hover {
  background: var(--hvnly-brand-secondary);
  transform: translateY(-2px);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_button i {
  font-size: 14px;
}

/* Body Section */
.hvnly--builder---api_property__builder___enhanced_preview_card_body {
  padding: 20px;
}
.hvnly--builder---api_property__builder___enhanced_preview_card_body .hvnly--builder---api_property__builder___editable_area 
.hvnly--builder---api_property__builder___enhanced_preview_card_price{    font-size: 30px;}
.hvnly--builder---api_property__builder___enhanced_preview_card_header {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--hvnly-color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--hvnly-color-bg-white);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: var(--hvnly-color-gray-500);
  font-size: 24px;
  flex-shrink: 0;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_title_section {
  flex-grow: 1;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_title {
  font-size: 20px;
  font-weight: var(--hvnly-font-weight-bold);
  color: var(--hvnly-text-primary);
  margin: 0 0 5px 0;
  line-height: 1.3;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_rating {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.hvnly--builder---api_property__builder___enhanced_preview_card_image
.hvnly--builder---api_property__builder___enhanced_preview_card_rating {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_stars {
  display: flex;
  margin-right: 8px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_stars i {
  color: #feca57;
  font-size: 14px;
  margin-right: 2px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_rating_value {
  font-weight: var(--hvnly-font-weight-semibold);
  margin-right: 5px;
  color: var(--hvnly-text-primary);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_rating_reviews {
  font-size: 13px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_image
.hvnly--builder---api_property__builder___enhanced_preview_card_rating_reviews {
  font-size: 12px;
  color: var(--hvnly-brand-primary);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_location {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_location i {
  margin-right: 6px;
  color: var(--hvnly-brand-primary);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_excerpt {
  margin-bottom: 30px;
  color: var(--hvnly-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_excerpt p {
  margin: 0;
}

/* Features Grid */
.hvnly--builder---api_property__builder___enhanced_card_preview_container
.hvnly--builder---api_property__builder___enhanced_preview_card_features {
  /* display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; */
  margin-bottom: 35px;
}
.hvnly--builder---api_property__builder___enhanced_card_preview_container
.hvnly--builder---api_property__builder___editable_area.features-area {
    display: flex;
    justify-content: space-evenly;
    background: var(--hvnly-color-bg-light);
    padding: 12px 5px 5px 5px;
    border-top: 1px solid#E4E4ED;
    border-bottom: 1px solid#E4E4ED;
}
.hvnly--builder---api_property__builder___enhanced_card_preview_container
.hvnly--builder---api_property__builder___enhanced_preview_card_feature {
  display: flex;
  /* flex-direction: column;
  align-items: center; */
  text-align: center;
  padding: 10px;
  background: var(--hvnly-color-bg-light);
  border-radius: 8px;
  transition: all 0.3s ease;gap: 15px;
}

.hvnly--builder---api_property__builder___enhanced_card_preview_container
.hvnly--builder---api_property__builder___editable_area.features-area 
.field-renderer 
.hvnly--builder---api_property__builder___enhanced_preview_card_feature_item i {
  font-size: 18px;
  color: var(--hvnly-brand-primary);
  margin-bottom: 5px;margin-right: 10px;
}

.hvnly--builder---api_property__builder___enhanced_card_preview_container
.hvnly--builder---api_property__builder___editable_area.features-area 
.field-renderer 
.hvnly--builder---api_property__builder___enhanced_preview_card_feature_item span {
  font-size: 12px;
  color: var(--hvnly-text-secondary);
  font-weight: var(--hvnly-font-weight-medium);
}

/* Content Area */
.hvnly--builder---api_property__builder___enhanced_preview_card_content_area {
  margin-bottom: 25px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_detail_item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: var(--hvnly-text-secondary);
  font-size: 14px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_detail_icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(108, 96, 254, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_detail_icon i {
  font-size: 14px;
  color: var(--hvnly-brand-primary);
}

/* Footer Section */
.hvnly--builder---api_property__builder___enhanced_preview_card_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--hvnly-color-bg-light);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_category {
  display: flex;
  align-items: center;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_action_btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hvnly-color-bg-white);
  border: 1px solid var(--hvnly-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_action_btn:hover {
  background: var(--hvnly-brand-primary);
  border-color: var(--hvnly-brand-primary);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_action_btn:hover i {
  color: var(--hvnly-color-bg-white);
}

.hvnly--builder---api_property__builder___enhanced_preview_card_action_btn i {
  font-size: 16px;
  color: var(--hvnly-text-secondary);
  transition: all 0.3s ease;
}
.hvnly--builder---api_property__builder___enhanced_preview_card
.hvnly--builder---api_property__builder___enhanced_preview_card_views {
  display: flex;
  align-items: center;
  color: var(--hvnly-text-secondary);
  font-size: 12px;padding: 8px 0px;
}
.hvnly--builder---api_property__builder___enhanced_preview_card
.hvnly--builder---api_property__builder___enhanced_preview_card_views i {
  margin-right: 6px;
  color: var(--hvnly-brand-primary);font-size: 11px;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_view_button {
  background: var(--hvnly-brand-primary);
  color: var(--hvnly-color-bg-white);
  border: none;
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: var(--hvnly-font-weight-medium);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_view_button:hover {
  background: var(--hvnly-brand-secondary);
  transform: translateY(-2px);
}

/* Thumbnail area styling */
.hvnly--builder---api_property__builder___enhanced_preview_card_image .hvnly--builder---api_property__builder___editable_area.thumbnail-area {
  position: relative;
  height: 100%;
  background: var(--hvnly-brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hvnly-color-bg-white);
  border-radius: var(--hvnly-border-radius) var(--hvnly-border-radius) 0 0;
}

/* BASE BUTTON STYLES */
a.hvnly-btn-primary{
  text-decoration: none;
}
.hvnly-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transform: translateZ(0);
    text-align: center;
    color: var(--hvnly-color-bg-white);
    font-family: var(--hvnly-font-family-base);
}
/* STYLE 1: LIQUID FILL */
.hvnly-btn-style-1 {
    background: transparent;
    color: var(--hvnly-brand-primary);
    border: 2px solid var(--hvnly-brand-primary);
}
.hvnly-btn-style-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--hvnly-brand-primary);
    z-index: -1;
    transition: height 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.hvnly-btn-style-1:hover {
    color: var(--hvnly-color-bg-white);
    box-shadow: 0 0 40px rgba(108, 96, 254, 0.5);
}
.hvnly-btn-style-1:hover::before {
    height: 100%;
}

/* Thumbnail Preloader Spinner */
.hvnly--builder---api_property__builder___enhanced_preview_card_image {
  position: relative;
}

.hvnly--builder---api_property__builder___thumbnail_loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.hvnly--builder---api_property__builder___thumbnail_spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007cba;
  border-radius: 50%;
  animation: hvnly-spin 1s linear infinite;
}

@keyframes hvnly-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hide spinner when image is loaded */
.hvnly--builder---api_property__builder___thumbnail_loading.hidden {
  display: none;
}
/* Enhanced Image Loading with Auto Blur Reduction */
.hvnly--builder---api_property__builder___enhanced_preview_card_image_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80');
    background-size: cover;
    background-position: center;
    opacity: 0.9;
    /* Start with 10px blur */
    filter: blur(10px);
    transform: scale(1);
    /* Auto animation that reduces blur from 10px to 0px */
    animation: reduceBlur 2.5s ease-in-out forwards;
}

/* Keyframes for automatic blur reduction */
@keyframes reduceBlur {
    0% {
        filter: blur(10px);
        opacity: 0.8;
    }
    25% {
        filter: blur(7px);
        opacity: 0.85;
    }
    50% {
        filter: blur(4px);
        opacity: 0.9;
    }
    75% {
        filter: blur(2px);
        opacity: 0.95;
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

/* Hide overlay elements when loading */
.hvnly--builder---api_property__builder___enhanced_preview_card_image.loading .hvnly--builder---api_property__builder___enhanced_preview_card_image_overlay_top,
.hvnly--builder---api_property__builder___enhanced_preview_card_image.loading .hvnly--builder---api_property__builder___enhanced_preview_card_image_overlay_bottom {
    opacity: 0.3;
    transition: opacity 0.3s ease-in-out;
}

.hvnly--builder---api_property__builder___enhanced_preview_card_image:not(.loading) .hvnly--builder---api_property__builder___enhanced_preview_card_image_overlay_top,
.hvnly--builder---api_property__builder___enhanced_preview_card_image:not(.loading) .hvnly--builder---api_property__builder___enhanced_preview_card_image_overlay_bottom {
    opacity: 1;
    transition: opacity 0.5s ease-in-out 0.3s;
}
/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/PropertyCard/PlaceholderLoader/PlaceholderLoader.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
/* Property Card Layout Placeholder Loader */
.hvnly-placeholder-settings-api_property__builder__main-container {
    animation: fadeInUp 0.3s ease-out;
    max-width: 1320px;
    margin: 0 auto;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 16px;
}
.hvnly--builder---api_property__builder__left-panel,
.hvnly--builder---api_property__builder__right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
}

.hvnly--builder---api_property__builder__card__container {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Left Side - Single Page Card Placeholder */
.hvnly-placeholder-single-page-card {
    background: var(--hvnly-color-bg-white);
    border-radius: 8px;
    padding: 15px;
    position: relative;
    width: 100%;
    padding-top: 0;
    max-width: 600px;
}

.hvnly-placeholder-single-page-card-header {
  position: relative;
  margin-bottom: 15px;
}

.hvnly-placeholder-thumbnail-area {
    height: 188px;
    background-color: var(--hvnly-color-bg-light);
    border-radius: 14px 14px 0px 0px;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.hvnly-placeholder-corner {
    position: absolute;
    width: 90px;
    height: 20px;
    background-color: var(--hvnly-color-bg-light);
    border-radius: 3px;
    z-index: 2;
    margin-bottom: 5px;
}
.hvnly-placeholder-corner.top-left {
  top: 10px;
  left: 10px;
}

.hvnly-placeholder-corner.top-right {
  top: 10px;
  right: 10px;
}

.hvnly-placeholder-corner.bottom-left {
  bottom: 15px;
  left: 10px;
}

.hvnly-placeholder-corner.bottom-right {
  bottom: 15px;
  right: 10px;
}

.hvnly-placeholder-single-page-card-body {
    margin-bottom: 30px;
}
.hvnly-placeholder-avatar-title-container {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: center;
}

.hvnly-placeholder-avatar-area {
  width: 35px;
  height: 35px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 50%;
  flex-shrink: 0;
}

.hvnly-placeholder-title-area {
  flex: 1;
}

.hvnly-placeholder-title-line {
  height: 12px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 3px;
  margin-bottom: 6px;
  width: 80%;
}

.hvnly-placeholder-title-line.short {
  width: 60%;
}

.hvnly-placeholder-content-area,
.hvnly-placeholder-features-area,
.hvnly-placeholder-excerpt-area {
  margin-bottom: 20px;
}

.hvnly-placeholder-content-line,
.hvnly-placeholder-feature-line,
.hvnly-placeholder-excerpt-line {
  height: 10px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 3px;
  margin-bottom: 6px;
}

.hvnly-placeholder-content-line {
  width: 90%;
}

.hvnly-placeholder-content-line:last-child {
  width: 70%;
}

.hvnly-placeholder-feature-line {
  width: 80%;
}

.hvnly-placeholder-excerpt-line {
  width: 95%;
}

.hvnly-placeholder-excerpt-line.short {
  width: 85%;
}

.hvnly-placeholder-single-page-card-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--hvnly-color-bg-light);
}

.hvnly-placeholder-footer-left,
.hvnly-placeholder-footer-right {
  flex: 1;
}

.hvnly-placeholder-footer-item {
  height: 10px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 3px;
  width: 80%;
}

.hvnly-placeholder-footer-right .hvnly-placeholder-footer-item {
  width: 60%;
  margin-left: auto;
}

/* Right Side - Enhanced Preview Card Placeholder */
.hvnly--builder---api_property__builder___enhanced_card_preview_container {
  background: var(--hvnly-color-bg-white);
  border-radius: var(--hvnly-border-radius);
  box-shadow: var(--hvnly-shadow-card);
  padding: 25px;
  width: 100%;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.hvnly-placeholder-enhanced-preview-card {
  background: var(--hvnly-color-bg-white);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
}

.hvnly-placeholder-enhanced-preview-card-image-section {
  position: relative;
}

.hvnly-placeholder-enhanced-preview-card-image {
  height: 200px;
  background-color: var(--hvnly-color-bg-light);
  position: relative;
}

.hvnly-placeholder-image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--hvnly-color-bg-light);
}

.hvnly-placeholder-overlay-top,
.hvnly-placeholder-overlay-bottom {
  position: absolute;
  left: 0;
  width: 95%;
  display: flex;
  justify-content: space-between;
  padding: 0;
  z-index: 2;
  text-align: center;
  margin: 0 auto;
  right: 0;
}

.hvnly-placeholder-overlay-top {
  top: 15px;
}

.hvnly-placeholder-overlay-bottom {
  bottom: 15px;
}

.hvnly-placeholder-image-left,
.hvnly-placeholder-image-right {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hvnly-placeholder-overlay-item {
  width: 30px;
  height: 25px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 15px;
}

.hvnly-placeholder-enhanced-preview-card-body {
  padding: 20px;
}

.hvnly-placeholder-enhanced-preview-card-header {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  align-items: center;
}

.hvnly-placeholder-enhanced-preview-card-avatar {
  width: 60px;
  height: 60px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--hvnly-color-bg-white);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.hvnly-placeholder-enhanced-preview-card-title-section {
  flex-grow: 1;
}

.hvnly-placeholder-enhanced-preview-card-title {
  height: 20px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 4px;
  margin-bottom: 8px;
  width: 80%;
}

.hvnly-placeholder-enhanced-preview-card-rating {
  height: 14px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 4px;
  margin-bottom: 6px;
  width: 60%;
}

.hvnly-placeholder-enhanced-preview-card-location {
  height: 12px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 4px;
  width: 70%;
}

.hvnly-placeholder-enhanced-preview-card-excerpt {
  margin-bottom: 15px;
}

.hvnly-placeholder-enhanced-preview-card-features {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 10px;
}

.hvnly-placeholder-feature-item {
  height: 12px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 4px;
  flex: 1;
}

.hvnly-placeholder-enhanced-preview-card-content-area {
  margin-bottom: 20px;
}

.hvnly-placeholder-detail-item {
  height: 12px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 4px;
  margin-bottom: 8px;
  width: 70%;
}

.hvnly-placeholder-detail-item:nth-child(2) {
  width: 85%;
}

.hvnly-placeholder-detail-item:nth-child(3) {
  width: 75%;
}

.hvnly-placeholder-enhanced-preview-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--hvnly-color-bg-light);
  border-top: 1px solid var(--hvnly-color-bg-light);
}

.hvnly-placeholder-enhanced-preview-card-category {
  display: flex;
  align-items: center;
}

.hvnly-placeholder-footer-button {
  height: 14px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 4px;
  width: 100px;
}

.hvnly-placeholder-enhanced-preview-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hvnly-placeholder-action-btn {
  width: 36px;
  height: 36px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 50%;
}

.hvnly-placeholder-views {
  display: flex;
  align-items: center;
  color: var(--hvnly-color-gray-500);
  font-size: 12px;
  height: 12px;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 4px;
  width: 60px;
}

/* Shimmer Animation */
.hvnly-placeholder-single-page-card *,
.hvnly-placeholder-enhanced-preview-card * {
  position: relative;
  overflow: hidden;
}

.hvnly-placeholder-single-page-card *::before,
.hvnly-placeholder-enhanced-preview-card *::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: hvnly-shimmer 1.5s infinite;
}

@keyframes hvnly-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabContent/PropertyCard/PropertyCardLayoutTab.css ***!
  \******************************************************************************************************************************************************************************************************************************/
.hvnly--builder--int_api__tab_content_panel {
    /* background-color: var(--hvnly-color-bg-light); */
    font-family: var(--hvnly-font-family-base);
}

.hvnly--builder---api_property__builder__main-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* max-width: 1400px; */
  /* margin: 0 auto;    height: calc(100vh - 260px);    overflow-y: auto; */
   /* vertical scroll */  padding-bottom: 100px;
}

.hvnly--builder---api_property__builder__left-panel,
.hvnly--builder---api_property__builder__right-panel {
  flex: 1;
  /* min-width: 300px; */
  display: flex;
  flex-direction: column;
  align-items: center;    padding-bottom: 50px;
}

.hvnly--builder---api_property__builder__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
}
.hvnly--builder---api_property__builder__card__container {
    width: 100%;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;position: relative;
}

/* Section Titles */
.hvnly--builder---api_property__builder__section-title {
  font-size: 22px;
  font-weight: var(--hvnly-font-weight-semibold);
  color: var(--hvnly-text-primary);
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
}

.hvnly--builder---api_property__builder__section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--hvnly-brand-primary);
  border-radius: 2px;
}

/* Modal Overlay css */
/* Modal Styles - FIXED CENTER POSITION */
.hvnly--builder---api_property__builder___widget_insert_modal_container
.hvnly--builder---api_property__builder___option_card {
 
    overflow: unset;

}
.hvnly--builder---api_property__builder___widget_insert_modal_container {
  position: fixed;
  top: 0;
  /* left: 0; */
  width: 100%;
  height: 100%;
  background: transparent; /* Remove blur/opacity background */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* Remove backdrop-filter */
}

.hvnly--builder---api_property__builder___widget_insert_modal_container.active {
  display: flex;
}

.hvnly--builder---api_property__builder___option_card {
  width: 330px;
  max-width: 90vw;
  border-radius: var(--hvnly-border-radius);
  overflow: hidden;
  background-color: var(--hvnly-color-bg-white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease-out;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  position: fixed; /* Always fixed position */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfect center */
  cursor: default;
}

/* Make header the drag handle */
.hvnly--builder---api_property__builder___option_card_header {
  background-color: var(--hvnly-brand-primary);
  border-radius: var(--hvnly-border-radius) var(--hvnly-border-radius) 0 0;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  cursor: move;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.hvnly--builder---api_property__builder___option_card_header_title_section {
  display: flex;
  align-items: center;
  color: var(--hvnly-color-bg-white);
  min-height: 50px;
  padding: 0 15px 0 20px;
  cursor: move;
}

.hvnly--builder---api_property__builder___option_card_header_title {
  flex-grow: 1;
  margin: 0;
  text-align: left;
  color: var(--hvnly-color-bg-white);
  font-size: 16px;
  font-weight: var(--hvnly-font-weight-semibold);
  cursor: move;
}

/* Don't make close button draggable */
.hvnly--builder---api_property__builder___header_action_area {
  display: flex;
  padding: 0 0 0 10px;
  justify-content: center;
  align-items: center;
  cursor: default;
}

.hvnly--builder---api_property__builder___header_action_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  color: var(--hvnly-color-bg-white);
  transition: all var(--hvnly-transition-time);
  font-size: 18px;
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.hvnly--builder---api_property__builder___header_action_link:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hvnly--builder---api_property__builder___option_card_body {
  padding: 20px;
  background-color: var(--hvnly-color-bg-white);
  overflow-y: auto;
  flex-grow: 1;
  cursor: default;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9); /* Center-based animation */
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Rest of your existing modal styles remain the same */
.hvnly--builder---api_property__builder___anchor_down {
  display: none;
}

.hvnly--builder---api_property__builder___field_options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 
 * Enhanced Modal Field Options Styles
 * Matches SinglePropertyLayoutTab design system
 * Applies to: .hvnly--builder---api_property__builder___field_options
 */

/* Remove anchor down element - not needed in this design */
.hvnly--builder---api_property__builder___anchor_down {
  display: none;
}

/* Main container for field options - vertical list layout */
.hvnly--builder---api_property__builder___field_options {
  /* Vertical stack of options */
  display: flex;
  flex-direction: column;
  
  /* Consistent spacing between options */
  gap: 12px;
  
  /* Ensure full width */
  width: 100%;
}

/* Individual field option card */
.hvnly--builder---api_property__builder___field_option {
  /* Flex layout for icon and text alignment */
  display: flex;
  align-items: center;
  
  /* Comfortable internal spacing */
  padding: 16px;
  
  /* Subtle border for definition */
  border: 1px solid var(--hvnly-border-color);
  
  /* Rounded corners matching design system */
  border-radius: 12px;
  
  /* Pointer cursor for interactivity */
  cursor: pointer;
  
  /* White background for clean look */
  background: var(--hvnly-color-bg-white);
  
  /* Smooth transitions for all properties */
  transition: all var(--hvnly-transition-time);
  
  /* Relative positioning for potential enhancements */
  position: relative;
  
  /* Prevent content from overflowing */
  overflow: hidden;
}

/* Hover state - enhanced visual feedback */
.hvnly--builder---api_property__builder___field_option:hover {
  /* Brand color border on hover */
  border-color: var(--hvnly-brand-primary);
  
  /* Subtle background tint */
  background-color: rgba(108, 96, 254, 0.03);
  
  /* Lift effect on hover */
  transform: translateY(-2px);
  
  /* Enhanced shadow for depth */
  box-shadow: 0 8px 25px rgba(108, 96, 254, 0.15);
  
  /* Smooth border color transition */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active state when clicked */
.hvnly--builder---api_property__builder___field_option:active {
  /* Subtle press down effect */
  transform: translateY(0);
  
  /* More prominent shadow */
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.2);
}

/* Field icon container */
.hvnly--builder---api_property__builder___field_icon {
  /* Fixed dimensions for consistency */
  width: 48px;
  height: 48px;
  
  /* Rounded square shape */
  border-radius: 12px;
  
  /* Subtle brand color background */
  background: linear-gradient(135deg, rgba(108, 96, 254, 0.1), rgba(108, 96, 254, 0.15));
  
  /* Center icon vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Space between icon and text */
  margin-right: 16px;
  
  /* Prevent icon from shrinking */
  flex-shrink: 0;
  
  /* Smooth background transitions */
  transition: all var(--hvnly-transition-time);
}

/* Icon styling */
.hvnly--builder---api_property__builder___field_icon i {
  /* Appropriate icon size */
  font-size: 20px;
  
  /* Brand color for icons */
  color: var(--hvnly-brand-primary);
  
  /* Smooth color transitions */
  transition: all var(--hvnly-transition-time);
}

/* Enhanced hover effects for entire option */
.hvnly--builder---api_property__builder___field_option:hover .hvnly--builder---api_property__builder___field_icon {
  /* Gradient background on hover */
  background: linear-gradient(135deg, var(--hvnly-brand-primary), var(--hvnly-brand-secondary));
  
  /* Slight scale effect */
  transform: scale(1.05);
}

.hvnly--builder---api_property__builder___field_option:hover .hvnly--builder---api_property__builder___field_icon i {
  /* White icon on colored background */
  color: var(--hvnly-color-bg-white);
}

/* Text information container */
.hvnly--builder---api_property__builder___field_info {
  /* Take remaining space */
  flex-grow: 1;
  
  /* Ensure proper text alignment */
  text-align: left;
}

/* Field title styling */
.hvnly--builder---api_property__builder___field_info h4 {
  /* Clear title styling */
  font-size: 16px;
  font-weight: var(--hvnly-font-weight-semibold);
  color: var(--hvnly-text-primary);
  
  /* Remove default margins */
  margin: 0 0 4px 0;
  
  /* Single line ellipsis if needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Field description styling */
.hvnly--builder---api_property__builder___field_info p {
  /* Subtle description text */
  font-size: 13px;
  color: var(--hvnly-text-secondary);
  line-height: 1.5;
  
  /* Remove default margins and padding */
  margin: 0 !important;
  padding: 0 !important;
  
  /* Allow multiple lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Info text for empty or instructional states */
.hvnly--builder---api_property__builder___info_text {
  /* Centered informational text */
  text-align: center;
  color: var(--hvnly-text-secondary);
  padding: 30px 20px;
  font-size: 15px;
  line-height: 1.6;
}

/* 
 * Used Field State
 * Visual indication when a field is already in use
 */
.hvnly--builder---api_property__builder___field_option.used {
  /* Reduced opacity for disabled state */
  opacity: 0.6;
  
  /* Change cursor to indicate non-interactive */
  cursor: not-allowed;
  
  /* Muted background */
  background: var(--hvnly-color-bg-light);
}

/* Remove hover effects for used fields */
.hvnly--builder---api_property__builder___field_option.used:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--hvnly-border-color);
  background: var(--hvnly-color-bg-light);
}

/* "Added" badge for used fields */
.hvnly--builder---api_property__builder___field_option.used::after {
  content: "✓ Added";
  position: absolute;
  top: 12px;
  right: 16px;
  background: var(--hvnly-brand-success);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: var(--hvnly-font-weight-medium);
}

/* 
 * Responsive Design
 * Adjustments for different screen sizes
 */

/* Tablet devices */
@media (max-width: 768px) {
  .hvnly--builder---api_property__builder___field_option {
    /* Slightly reduced padding on tablets */
    padding: 14px;
  }
  
  .hvnly--builder---api_property__builder___field_icon {
    /* Slightly smaller icons on tablets */
    width: 44px;
    height: 44px;
    margin-right: 14px;
  }
  
  .hvnly--builder---api_property__builder___field_icon i {
    font-size: 18px;
  }
  
  .hvnly--builder---api_property__builder___field_info h4 {
    font-size: 15px;
  }
  
  .hvnly--builder---api_property__builder___field_info p {
    font-size: 12px;
  }
}

/* Mobile devices */
@media (max-width: 480px) {
  .hvnly--builder---api_property__builder___field_options {
    /* Reduced gap on mobile */
    gap: 10px;
  }
  
  .hvnly--builder---api_property__builder___field_option {
    /* Compact padding on mobile */
    padding: 12px;
  }
  
  .hvnly--builder---api_property__builder___field_icon {
    /* Smaller icons on mobile */
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 10px;
  }
  
  .hvnly--builder---api_property__builder___field_icon i {
    font-size: 16px;
  }
  
  .hvnly--builder---api_property__builder___field_info h4 {
    font-size: 14px;
  }
  
  .hvnly--builder---api_property__builder___field_info p {
    font-size: 11px;
    -webkit-line-clamp: 2;
  }
}

/* 
 * Animation Enhancements
 * Smooth entrances and interactions
 */

/* Slide-in animation for field options */
@keyframes fieldOptionSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply staggered animation to field options */
.hvnly--builder---api_property__builder___field_option {
  animation: fieldOptionSlideIn 0.4s ease-out both;
}

/* Stagger the animation for each option */
.hvnly--builder---api_property__builder___field_option:nth-child(1) { animation-delay: 0.05s; }
.hvnly--builder---api_property__builder___field_option:nth-child(2) { animation-delay: 0.1s; }
.hvnly--builder---api_property__builder___field_option:nth-child(3) { animation-delay: 0.15s; }
.hvnly--builder---api_property__builder___field_option:nth-child(4) { animation-delay: 0.2s; }
.hvnly--builder---api_property__builder___field_option:nth-child(5) { animation-delay: 0.25s; }
.hvnly--builder---api_property__builder___field_option:nth-child(6) { animation-delay: 0.15s; }
.hvnly--builder---api_property__builder___field_option:nth-child(7) { animation-delay: 0.25s; }
.hvnly--builder---api_property__builder___field_option:nth-child(8) { animation-delay: 0.15s; }
.hvnly--builder---api_property__builder___field_option:nth-child(9) { animation-delay: 0.15s; }
.hvnly--builder---api_property__builder___field_option:nth-child(10) { animation-delay: 0.25s; }

/* 
 * Accessibility Enhancements
 * Better focus states and high contrast support
 */

/* Focus state for keyboard navigation */
.hvnly--builder---api_property__builder___field_option:focus {
  outline: 2px solid var(--hvnly-brand-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .hvnly--builder---api_property__builder___field_option {
    border: 2px solid var(--hvnly-text-primary);
  }
  
  .hvnly--builder---api_property__builder___field_option:hover {
    border-color: var(--hvnly-brand-primary);
    background: var(--hvnly-color-bg-light);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hvnly--builder---api_property__builder___field_option {
    animation: none;
    transition: none;
  }
  
  .hvnly--builder---api_property__builder___field_option:hover {
    transform: none;
  }
}

/* 
 * Print Styles
 * Ensure field options look good when printed
 */
@media print {
  .hvnly--builder---api_property__builder___field_option {
    /* Remove backgrounds and shadows for print */
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    transform: none !important;
  }
  
  .hvnly--builder---api_property__builder___field_icon {
    /* Solid background for print */
    background: #f0f0f0 !important;
  }
  
  .hvnly--builder---api_property__builder___field_icon i {
    color: #333 !important;
  }
}

/* No Options Available State */
.hvnly--builder---api_property__builder___no_options {
  text-align: center;
  padding: 40px 20px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder---api_property__builder___no_options i {
  font-size: 48px;
  color: var(--hvnly-brand-success);
  margin-bottom: 15px;
  opacity: 0.7;
}

.hvnly--builder---api_property__builder___no_options p {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: var(--hvnly-font-weight-medium);
}

.hvnly--builder---api_property__builder___no_options small {
  font-size: 14px;
  opacity: 0.8;
}

/* Used Field State (if you want to show disabled instead of hide) */
.hvnly--builder---api_property__builder___field_option.used {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--hvnly-color-bg-light);
}

.hvnly--builder---api_property__builder___field_option.used:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--hvnly-border-color);
  background: var(--hvnly-color-bg-light);
}

.hvnly--builder---api_property__builder___field_option.used::after {
  content: "✓ Added";
  position: absolute;
  top: 10px;
  right: 15px;
  background: var(--hvnly-brand-success);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: var(--hvnly-font-weight-medium);
}

/* NEW: Thumbnail restriction message - ADD THIS TO EXISTING CSS */
.hvnly--builder---api_property__builder___thumbnail_restriction_message {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 15px;
  font-size: 12px;
  color: #856404;
}

.hvnly--builder---api_property__builder___thumbnail_restriction_message i {
  color: var(--hvnly-status-pending);
  font-size: 14px;
  flex-shrink: 0;
}

.hvnly--builder---api_property__builder___thumbnail_restriction_message span {
  line-height: 1.4;
}

/* NEW: Thumbnail area visual indicator - ADD THIS TO EXISTING CSS */
.hvnly--builder---api_property__builder___editable_area.thumbnail-area.has-image-type {
  border-color: var(--hvnly-status-pending);
  background-color: rgba(255, 193, 7, 0.05);
}

.hvnly--builder---api_property__builder___editable_area.thumbnail-area.has-image-type .hvnly--builder---api_property__builder___add_element_btn {
  background-color: var(--hvnly-status-pending);
  color: #000;
}

/* Enhanced Field Actions Styling with Your Variables */
.hvnly--builder---api_property__builder___field_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* width: 100%; */
  padding: 6px 10px;
  background: var(--hvnly-color-bg-white);
  border-radius: var(--hvnly-border-radius-sm);
  border: 1px solid var(--hvnly-border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all var(--hvnly-transition-time);
  position: relative;
}

.hvnly--builder---api_property__builder___field_actions:hover {
  border-color: var(--hvnly-brand-primary);
  box-shadow: 0 2px 8px rgba(108, 96, 254, 0.1);
}

.hvnly--builder---api_property__builder___field_label {
  font-size: 12px;
  font-weight: var(--hvnly-font-weight-medium);
  color: var(--hvnly-text-primary);
  flex: 1;
  padding-right: 8px;
}

.hvnly--builder---api_property__builder___field_action_buttons {
  display: flex;
  gap: 2px;
  align-items: center;
}

.hvnly--builder---api_property__builder___field_action_btn {
  background: var(--hvnly-color-bg-light);
  border: 1px solid var(--hvnly-border-color);
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  color: var(--hvnly-color-gray-500);
  transition: all var(--hvnly-transition-time);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.hvnly--builder---api_property__builder___field_action_btn:hover {
  background: var(--hvnly-brand-primary);
  color: white;
  border-color: var(--hvnly-brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(108, 96, 254, 0.2);
}

/* Specific button hover colors */
.hvnly--builder---api_property__builder___field_move_up_btn:hover {
  background: var(--hvnly-brand-success);
  border-color: var(--hvnly-brand-success);
  box-shadow: 0 2px 4px rgba(0, 180, 106, 0.2);
}

.hvnly--builder---api_property__builder___field_move_down_btn:hover {
  background: var(--hvnly-brand-primary);
  border-color: var(--hvnly-brand-primary);
  box-shadow: 0 2px 4px rgba(108, 96, 254, 0.2);
}

.hvnly--builder---api_property__builder___field_edit_btn:hover {
  background: var(--hvnly-status-pending);
  border-color: var(--hvnly-status-pending);
  box-shadow: 0 2px 4px rgba(255, 181, 7, 0.2);
}

.hvnly--builder---api_property__builder___field_delete_btn:hover {
  background: var(--hvnly-brand-error);
  border-color: var(--hvnly-brand-error);
  box-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
}

/* Field Renderer Container */
.field-renderer {
  margin-bottom: 6px;
  transition: all var(--hvnly-transition-time);
}

.field-renderer:last-child {
  margin-bottom: 0;
}

/* Empty State Enhancement */
.hvnly--builder---api_property__builder___editable_area.empty {
  background: var(--hvnly-color-bg-light);
  border: 1px dashed var(--hvnly-border-color);
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder---api_property__builder___editable_area.empty:hover {
  background: var(--hvnly-color-bg-white);
  border-color: var(--hvnly-brand-primary);
}

/* Add Element Button Enhancement */
.hvnly--builder---api_property__builder___add_element_btn {
  background: var(--hvnly-color-black);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  padding: 8px;
  transition: all var(--hvnly-transition-time);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(108, 96, 254, 0.2);
}

.hvnly--builder---api_property__builder___add_element_btn:hover {
  background: var(--hvnly-brand-secondary);
  /* transform: translateY(-1px); */
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.3);
}

.hvnly--builder---api_property__builder___add_element_btn i {
  font-size: 12px;
  transition: transform var(--hvnly-transition-time);
}

.hvnly--builder---api_property__builder___add_element_btn:hover i {
  transform: rotate(90deg);
}

/* Avatar Area Specific Styling */
.hvnly--builder---api_property__builder___avatar_with_icon {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-direction: column;
}

.hvnly--builder---api_property__builder___avatar_with_icon .hvnly--builder---api_property__builder___field_actions {
  flex: 1;
}

/* Animation for field addition */
@keyframes fieldSlideIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.field-renderer {
  animation: fieldSlideIn 0.2s ease-out;
}

/* Enhanced Area Styling */
/* .hvnly--builder---api_property__builder___editable_area {
  transition: all var(--hvnly-transition-time);
  border-radius: var(--hvnly-border-radius-sm);
  padding: 8px;
  margin-bottom: 6px;
  background: var(--hvnly-color-bg-white);
  border: 1px solid transparent;
} */

.hvnly--builder---api_property__builder___editable_area:hover {
  border-color: var(--hvnly-border-color);
}

.hvnly--builder---api_property__builder___editable_area:has(.hvnly--builder---api_property__builder___field_actions:hover) {
  border-color: var(--hvnly-brand-primary);
}

/* Tooltip Enhancement */
.hvnly--builder---api_property__builder___field_action_btn {
  position: relative;
}

.hvnly--builder---api_property__builder___field_action_btn::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hvnly-color-black);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all var(--hvnly-transition-time);
  margin-bottom: 6px;
  z-index: 1000;
}

.hvnly--builder---api_property__builder___field_action_btn:hover::after {
  opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hvnly--builder---api_property__builder___field_actions {
    padding: 4px 8px;
  }
  
  .hvnly--builder---api_property__builder___field_label {
    font-size: 11px;
  }
  
  .hvnly--builder---api_property__builder___field_action_btn {
    width: 20px;
    height: 20px;
    padding: 3px;
    font-size: 9px;
  }
}

/* Section titles enhancement */
.hvnly--builder---api_property__builder__section-title {
  font-size: 16px;
  font-weight: var(--hvnly-font-weight-semibold);
  color: var(--hvnly-text-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hvnly-border-color);
}

/* Add these styles to your CSS */
.hvnly--builder---api_property__builder___edit_mode_info {
  background: var(--hvnly-color-bg-light);
  border: 1px solid var(--hvnly-border-color);
  border-radius: var(--hvnly-border-radius-sm);
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder---api_property__builder___edit_mode_info i {
  color: var(--hvnly-brand-primary);
}

/* Cancel button styles for edit modal */
.hvnly--builder---api_property__builder___field_editor_actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--hvnly-border-color);
  margin-top: 16px;
}

.hvnly--builder---api_property__builder___field_editor_btn {
  padding: 8px 16px;
  border-radius: var(--hvnly-border-radius-sm);
  font-family: var(--hvnly-font-family-base);
  font-weight: var(--hvnly-font-weight-medium);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--hvnly-transition-time);
  border: 1px solid transparent;
}

.hvnly--builder---api_property__builder___field_editor_cancel_btn {
  background: var(--hvnly-color-bg-light);
  color: var(--hvnly-text-secondary);
  border-color: var(--hvnly-border-color);
}

.hvnly--builder---api_property__builder___field_editor_cancel_btn:hover {
  background: var(--hvnly-color-gray-500);
  color: var(--hvnly-color-bg-white);
  border-color: var(--hvnly-color-gray-500);
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/builder/components/TabNavigation/TabNavigation.css ***!
  \************************************************************************************************************************************************************************************************************/
.hvnly--builder--int_api__property_builder_header {
    width: calc(100% - 100px); 
    transition: all 0.3s ease;
}

/* Sticky Header with Smooth Animation */
.property-builder-sticky {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 123 !important;
  backdrop-filter: blur(10px) !important;
  padding: 5px 80px 5px 80px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(0);
  opacity: 9999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation: slideDown 0.3s ease-out;
}

/* Adjust for WordPress admin bar */
.property-builder-sticky {
    top: 31px !important;
    width: calc(100% - 320px); 
    transition: all 0.3s ease;
}
@media screen and (max-width: 782px) {
  .property-builder-sticky {
    top: 46px !important;
    padding: 8px 20px !important;
  }
}

/* Smooth entrance animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Smooth transitions for original header */
.hvnly--builder--int_api__property_builder_header {
  transition: all 0.3s ease;
}

/* Optional subtle scale for title */
.property-builder-sticky h1 {
  transition: all 0.5s ease;
}
.property-builder-sticky h1:hover {
  transform: scale(1.02);
}

/* Tab Navigation Styles - Exact Design Match */
.hvnly--builder--int_api__property_builder_tab_main {
  border-radius: var(--hvnly-border-radius);
  box-shadow: var(--hvnly-shadow-card);
  overflow: hidden;
}

.hvnly--builder--int_api__tab_nav_tabs_main {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.hvnly--builder--int_api__tab_nav_tabs_wrapper {
  position: relative;
  background-color: var(--hvnly-color-bg-light);
  border-radius: 18px;
  border: 2px solid var(--hvnly-border-color);
  margin: 0 auto;
  overflow: hidden;
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.hvnly--builder--int_api__tab_nav_tabs {
  display: flex;
  position: relative;
}

.hvnly--builder--int_api__tab_nav_item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: transparent;
  border: none;
  color: var(--hvnly-color-gray-500);
  font-size: 14px;
  font-weight: var(--hvnly-font-weight-semibold);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  white-space: nowrap;
  border-radius: 10px;
  font-family: var(--hvnly-font-family-heading);
  min-width: 140px;
  text-align: center;
  z-index: 1;
  overflow: hidden;
  text-decoration: none;
}

/* UNIQUE MODERN HOVER EFFECT: Active tab styling */
.hvnly--builder--int_api__tab_nav_item.active {
  color: white;
  background: linear-gradient(135deg, var(--hvnly-brand-primary) 0%, var(--hvnly-brand-secondary) 100%);
  box-shadow: 0 4px 15px rgba(108, 96, 254, 0.3);
}

/* UNIQUE MODERN HOVER EFFECT: Create a liquid-like background for hover */
.hvnly--builder--int_api__tab_nav_item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 96, 254, 0.2) 0%, rgba(108, 96, 254, 0) 70%);
  transform: translate(-50%, -50%);
  transition: width 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              height 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: -1;
}

.hvnly--builder--int_api__tab_nav_item:hover::before {
  width: 150px;
  height: 150px;
}

/* UNIQUE MODERN HOVER EFFECT: Animated underline with gradient */
.hvnly--builder--int_api__tab_nav_item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hvnly-brand-primary), var(--hvnly-brand-secondary));
  transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 3px 3px 0 0;
}

.hvnly--builder--int_api__tab_nav_item:hover::after {
  width: 100%;
}

/* UNIQUE MODERN HOVER EFFECT: Text and icon animations */
.hvnly--builder--int_api__tab_nav_item:hover:not(.active) {
  color: var(--hvnly-brand-primary);
  transform: translateY(-3px);
}

.hvnly--builder--int_api__tab_nav_item i {
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hvnly--builder--int_api__tab_nav_item:hover:not(.active) i {
  transform: scale(1.15) rotate(5deg);
  color: var(--hvnly-brand-primary);
}

/* UNIQUE MODERN HOVER EFFECT: Add a subtle pulse animation */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 96, 254, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(108, 96, 254, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(108, 96, 254, 0);
  }
}

.hvnly--builder--int_api__tab_nav_item:hover:not(.active) {
  animation: pulse 1.5s infinite;
}

/* Tab content area */
.hvnly--builder--int_api__tab_nav_content {
  border-radius: 0 0 var(--hvnly-border-radius) var(--hvnly-border-radius);
}

.hvnly--builder--int_api__tab_content_panel {
  animation: fadeInUp 0.3s ease-out;
  max-width: 1320px;
  margin: 0 auto;
  padding: 30px;
  background-color: white;
  border-radius: 16px;
}

.hvnly--builder--int_api__tab_content_panel p {
  color: var(--hvnly-text-secondary);
  margin-bottom: 25px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 600px;
}

/* Active tab indicator animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .hvnly--builder--int_api__tab_nav_tabs_wrapper {
    padding: 4px;
  }
  
  .hvnly--builder--int_api__tab_nav_item {
    padding: 12px 16px;
    font-size: 13px;
    min-width: 120px;
    gap: 6px;
  }
  
  .hvnly--builder--int_api__tab_nav_item i {
    font-size: 14px;
  }
  
  .hvnly--builder--int_api__tab_nav_content {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .hvnly--builder--int_api__tab_nav_tabs_wrapper {
    padding: 3px;
  }
  
  .hvnly--builder--int_api__tab_nav_item {
    padding: 10px 12px;
    min-width: -moz-max-content;
    min-width: max-content;
    font-size: 12px;
  }
  
  .hvnly--builder--int_api__tab_nav_item span {
    display: none;
  }
  
  .hvnly--builder--int_api__tab_nav_item i {
    font-size: 14px;
    margin: 0;
  }
  
  .hvnly--builder--int_api__tab_nav_item.active span {
    display: inline;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hvnly-brand-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .hvnly--builder--int_api__property_builder_tab_main {
    background: var(--hvnly-dark-bg-white);
    border-color: var(--hvnly-dark-border);
  }
  
  .hvnly--builder--int_api__tab_nav_tabs_wrapper {
    background: var(--hvnly-dark-bg-light);
    border-color: var(--hvnly-dark-border);
  }
  
  .hvnly--builder--int_api__tab_nav_item {
    color: var(--hvnly-dark-text-secondary);
  }
  
  /* Dark mode adjustments */
  .hvnly--builder--int_api__tab_nav_item:hover:not(.active) {
    color: var(--hvnly-brand-primary);
  }
  
  .hvnly--builder--int_api__tab_nav_item:hover:not(.active) i {
    color: var(--hvnly-brand-primary);
  }
  
  .hvnly--builder--int_api__tab_nav_content {
    background: var(--hvnly-dark-bg-white);
  }
  
  .hvnly--builder--int_api__tab_content_panel {
    background: var(--hvnly-dark-bg-white);
  }
  
  .hvnly--builder--int_api__tab_content_panel p {
    color: var(--hvnly-dark-text-secondary);
  }
}

/* Focus states for accessibility */
.hvnly--builder--int_api__tab_nav_item:focus {
  outline: none;
}

/* Minimal loading state */
.hvnly--builder--int_api__tab_nav_item.loading {
  opacity: 0.7;
  pointer-events: none;
}

.hvnly--builder--int_api__tab_nav_item.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(108, 96, 254, 0.3);
  border-top: 2px solid var(--hvnly-brand-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Badge support for tabs */
.hvnly--builder--int_api__tab_nav_badge {
  background: var(--hvnly-brand-accent);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  font-weight: var(--hvnly-font-weight-medium);
}
/*!************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/BuilderApp.css ***!
  \************************************************************************************************************************************************************************/
/* Base Styles */
body {
  font-family: var(--hvnly-bodyFont);
  background-color: var(--hvnly-color-bg-light);
  color: var(--hvnly-text-primary);
  line-height: 1.6;
  padding: 0;
  font-size: 15px;
}

#HvnlyNab_property_builder_render {
  position: relative;
  margin-left: -20px;
  margin-top: -4px;
}

ul#adminmenu a.wp-has-current-submenu:after, 
ul#adminmenu>li.current>a.current:after {
  border-right-color: var(--hvnly-brand-primary) !important;
}

.hvnly--builder--int_api__property_builder_wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Header Section */
.hvnly--builder--int_api__property_builder_header {
  background: var(--hvnly-brand-primary);
  color: white;
  padding: 10px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.hvnly--builder--int_api__property_builder_header h1 i {
  color: white;
}

.hvnly--builder--int_api__property_builder_header h1 {
  font-size: 24px;
  font-weight: var(--hvnly-font-weight-bold);
  font-family: var(--hvnly-headingFont);
  display: flex;
  align-items: center;
  gap: 25px;
  color: white;
}

.hvnly--builder--int_api__property_builder_header_actions {
  display: flex;
  gap: 12px;
}

.hvnly--builder--int_api__property_builder_btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-weight: var(--hvnly-font-weight-semibold);
  cursor: pointer;
  transition: all var(--hvnly-transition-time);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: var(--hvnly-headingFont);
}

.hvnly--builder--int_api__property_builder_btn_primary {
  background: #fff;
  color: var(--hvnly-brand-primary);
  box-shadow: 0 4px 15px rgba(108, 96, 254, 0.2);
}

.hvnly--builder--int_api__property_builder_btn_primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 96, 254, 0.3);
}

.hvnly--builder--int_api__property_builder_btn_secondary {
  background: transparent;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.hvnly--builder--int_api__property_builder_btn_secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Main flex container */
.hvnly--builder--int_api__property_builder_content {
  display: flex;
  overflow: hidden;
}

/* Left column (Available Field Types) */
.hvnly--builder--int_api__property_builder_components {
  width: 280px;
  border-right: 1px solid var(--hvnly-border-color);
  padding: 20px;
}

/* Builder Area */
.hvnly--builder--int_api__property_builder_area {
  flex: 1;
  padding: 20px;
  padding-bottom: 50px;
}

/* ==========================================================================
   Property Builder Header Styles
   ========================================================================== */
.hvnly--builder--int_api__property_builder_section_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.hvnly--builder--int_api__property_builder_section_header_title {
  margin: 0;
  font-weight: var(--hvnly-font-weight-semibold);
  color: var(--hvnly-text-primary);
  font-size: 1.25rem;
}

.hvnly--builder--int_api__property_builder_stats {
  background: var(--hvnly-color-bg-light);
  color: var(--hvnly-text-secondary);
  padding: 6px 16px;
  border-radius: var(--hvnly-border-radius);
  font-size: 14px;
  font-weight: var(--hvnly-font-weight-medium);
  border: 1px solid var(--hvnly-border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hvnly-bodyFont);
  box-shadow: var(--hvnly-shadow-card);
}

.hvnly--builder--int_api__property_builder_stats_sections,
.hvnly--builder--int_api__property_builder_stats_fields {
  background: var(--hvnly-brand-primary);
  color: var(--hvnly-color-bg-white);
  border-radius: var(--hvnly-border-radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--hvnly-font-weight-bold);
  font-family: var(--hvnly-bodyFont);
  transition: var(--hvnly-transition-time);
}

.hvnly--builder--int_api__property_builder_stats_sections:hover,
.hvnly--builder--int_api__property_builder_stats_fields:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .hvnly--builder--int_api__property_builder_header_title {
    color: var(--hvnly-dark-text-primary);
  }
  
  .hvnly--builder--int_api__property_builder_stats {
    background: var(--hvnly-dark-bg-light);
    color: var(--hvnly-dark-text-secondary);
    border-color: var(--hvnly-dark-border);
    box-shadow: var(--hvnly-dark-shadow-card);
  }
  
  .hvnly--builder--int_api__property_builder_stats_sections,
  .hvnly--builder--int_api__property_builder_stats_fields {
    background: var(--hvnly-brand-primary);
    color: var(--hvnly-dark-bg-white);
  }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 768px) {
  .hvnly--builder--int_api__property_builder_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .hvnly--builder--int_api__property_builder_stats {
    align-self: stretch;
    justify-content: center;
  }
}

/* Tabs Container */
.hvnly--builder--int_api__property_builder_tabs {
  margin-bottom: 25px;
}

/* Empty State */
.hvnly--builder--int_api__property_builder_empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder--int_api__property_builder_empty i {
  font-size: 48px;
  margin-bottom: 15px;
  color: var(--hvnly-border-color);
}

.hvnly--builder--int_api__property_builder_empty p {
  margin-bottom: 20px;
  font-size: 16px;
}

.hvnly--builder--int_api__property_builder_empty_btn {
  background: var(--hvnly-brand-primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: var(--hvnly-font-weight-semibold);
  font-family: var(--hvnly-headingFont);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder--int_api__property_builder_empty_btn:hover {
  background: #5944f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 96, 254, 0.3);
}

/* ==============================================
   DRAG AND DROP STYLES
   ============================================== */

/* Drag Handle Styles */
.hvnly--builder--int_api__drag_handle {
  cursor: grab;
  margin-right: 10px;
  color: var(--hvnly-text-secondary);
  padding: 5px;
  border-radius: 4px;
  cursor: move;
}

.hvnly--builder--int_api__drag_handle:hover {
  color: var(--hvnly-brand-primary);
  background: rgba(108, 96, 254, 0.1);
}

.hvnly--builder--int_api__drag_handle:active {
  cursor: grabbing;
}

/* Dragging state - Highlight background when dragging */
.hvnly--builder--int_api__dragging {
  opacity: 0.85;
  background: rgba(108, 96, 254, 0.15) !important;
  border-color: var(--hvnly-brand-primary) !important;
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.2);
}

.hvnly--builder--int_api__drag_overlay {
  opacity: 0.95;
  z-index: 1000;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Enhanced button styles */
.hvnly--builder--int_api__property_builder_btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hvnly--builder--int_api__property_builder_btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Spinner animation */
.fa-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==============================================
   PROFESSIONAL DRAG INDICATORS
   ============================================== */

/* Tab drag over styles */
.hvnly--builder--int_api__drag_over_tab {
  background-color: rgba(108, 96, 254, 0.08) !important;
  border: 2px solid var(--hvnly-brand-primary) !important;
  position: relative;
}

.hvnly--builder--int_api__drag_over_tab::after {
  display: none;
}

/* Field drag over styles */
.hvnly--builder--int_api__field_drag_over {
  background-color: rgba(108, 96, 254, 0.05);
  border: 1px solid var(--hvnly-brand-primary);
}

/* Position indicators for precise drop targeting */
.hvnly--builder--int_api__field_drag_over_up {
  border-top: 3px solid var(--hvnly-brand-primary);
  margin-top: 4px;
}

.hvnly--builder--int_api__field_drag_over_down {
  border-bottom: 3px solid var(--hvnly-brand-primary);
  margin-bottom: 4px;
}

/* Tab drag over styles */
.hvnly--builder--int_api__property_builder_tab.drag-over {
  background-color: rgba(108, 96, 254, 0.08);
  border: 2px solid var(--hvnly-brand-primary);
}

/* Dragging state for tabs - Highlight background */
.hvnly--builder--int_api__property_builder_tab.dragging {
  opacity: 0.85;
  background-color: rgba(108, 96, 254, 0.15) !important;
  border: 2px solid var(--hvnly-brand-primary) !important;
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.2);
}

/* Dragging state for fields - Highlight background */
.hvnly--builder--int_api__property_builder_field.dragging {
  opacity: 0.85;
  background-color: rgba(108, 96, 254, 0.15) !important;
  border: 2px solid var(--hvnly-brand-primary) !important;
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.2);
  cursor: grabbing;
}

/* Enhanced field hover effects */
.hvnly--builder--int_api__property_builder_field:hover {
  border-color: var(--hvnly-brand-primary);
  box-shadow: 0 2px 8px rgba(108, 96, 254, 0.1);
}

/* Professional drag overlay styles */
.hvnly--builder--int_api__drag_overlay_tab,
.hvnly--builder--int_api__drag_overlay_field,
.hvnly--builder--int_api__drag_overlay_component {
  background: white;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.95;
  cursor: grabbing !important;
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  border: 1px solid var(--hvnly-brand-primary);
  transform: none !important;
}

.hvnly--builder--int_api__drag_overlay_tab i,
.hvnly--builder--int_api__drag_overlay_field i,
.hvnly--builder--int_api__drag_overlay_component i {
  color: var(--hvnly-brand-primary);
}

/* Drop placeholder for fields */
.hvnly--builder--int_api__field_drop_placeholder {
  height: 40px;
  border: 2px dashed var(--hvnly-brand-primary);
  border-radius: 8px;
  margin: 10px 0;
  background: rgba(108, 96, 254, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hvnly-brand-primary);
  font-weight: 500;
}

/* Tab Collapse Button */
.hvnly--builder--int_api__tab_collapse_btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hvnly-text-secondary);
  padding: 5px;
  margin-right: 10px;
  border-radius: 4px;
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder--int_api__tab_collapse_btn:hover {
  color: var(--hvnly-brand-primary);
  background: rgba(108, 96, 254, 0.1);
}

/* Field Details */
.hvnly--builder--int_api__field_details {
  flex: 1;
}

.hvnly--builder--int_api__field_label {
  font-weight: var(--hvnly-font-weight-medium);
  margin-bottom: 4px;
}

.hvnly--builder--int_api__field_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--hvnly-text-secondary);
}

.hvnly--builder--int_api__field_placeholder {
  font-style: italic;
}

/* Field Badges */
.hvnly--builder--int_api__field_required_badge,
.hvnly--builder--int_api__field_admin_badge,
.hvnly--builder--int_api__field_disabled_badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: var(--hvnly-font-weight-medium);
}

.hvnly--builder--int_api__field_required_badge {
  background: rgba(0, 180, 106, 0.1);
  color: var(--hvnly-brand-success);
}

.hvnly--builder--int_api__field_admin_badge {
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
}

.hvnly--builder--int_api__field_disabled_badge {
  background: rgba(108, 117, 125, 0.1);
  color: var(--hvnly-color-gray-500);
}

/* Modal Checkbox Styles */
.hvnly--builder--int_api__modal_checkbox_group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hvnly--builder--int_api__property_builder_modal_checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--hvnly-text-primary);
}

.hvnly--builder--int_api__property_builder_modal_checkbox input {
  display: none;
}

.hvnly--builder--int_api__checkbox_custom {
  width: 18px;
  height: 18px;
  border: 2px solid var(--hvnly-border-color);
  border-radius: 4px;
  margin-right: 10px;
  position: relative;
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder--int_api__property_builder_modal_checkbox input:checked + .hvnly--builder--int_api__checkbox_custom {
  background: var(--hvnly-brand-primary);
  border-color: var(--hvnly-brand-primary);
}

.hvnly--builder--int_api__property_builder_modal_checkbox input:checked + .hvnly--builder--int_api__checkbox_custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.hvnly--builder--int_api__property_builder_modal_checkbox:hover .hvnly--builder--int_api__checkbox_custom {
  border-color: var(--hvnly-brand-primary);
}

/* Improved drag handle visibility */
.hvnly--builder--int_api__drag_handle {
  cursor: grab;
  margin-right: 10px;
  color: var(--hvnly-text-secondary);
  padding: 8px;
  border-radius: 4px;
  opacity: 0.6;
  cursor: move;
}

.hvnly--builder--int_api__drag_handle:hover {
  color: var(--hvnly-brand-primary);
  background: rgba(108, 96, 254, 0.1);
  opacity: 1;
}

.hvnly--builder--int_api__drag_handle:active {
  cursor: grabbing;
}

/* Required tab styling */
.hvnly--builder--int_api__required_tab {
  border-left: 4px solid var(--hvnly-brand-primary);
}

.hvnly--builder--int_api__required_badge {
  background: var(--hvnly-brand-primary);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  text-transform: uppercase;
  font-weight: var(--hvnly-font-weight-bold);
}

/* Locked field styling */
.hvnly--builder--int_api__locked_field {
  background-color: rgba(108, 96, 254, 0.05);
}

.hvnly--builder--int_api__locked_badge {
  background: var(--hvnly-brand-error);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  text-transform: uppercase;
  font-weight: var(--hvnly-font-weight-bold);
}

.hvnly--builder--int_api__field_locked_text {
  color: var(--hvnly-text-secondary);
  font-style: italic;
  font-size: 12px;
}

/* Tab category styling */
.hvnly--builder--int_api__property_builder_tab_category {
  background: rgba(108, 96, 254, 0.1);
  color: var(--hvnly-brand-primary);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 10px;
}

/* Category management button */
.hvnly--builder--int_api__property_builder_category_btn {
  background: var(--hvnly-color-bg-light);
  color: var(--hvnly-brand-primary);
  border: 1px solid var(--hvnly-brand-primary);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: var(--hvnly-font-weight-semibold);
  font-family: var(--hvnly-headingFont);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--hvnly-transition-time);
  margin-bottom: 20px;
}

.hvnly--builder--int_api__property_builder_category_btn:hover {
  background: var(--hvnly-brand-primary);
  color: white;
}

/* Category list */
.hvnly--builder--int_api__property_builder_categories {
  margin-bottom: 20px;
}

.hvnly--builder--int_api__property_builder_category_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.hvnly--builder--int_api__property_builder_category_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hvnly--builder--int_api__property_builder_category_item {
  background: var(--hvnly-color-bg-light);
  border: 1px solid var(--hvnly-border-color);
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hvnly--builder--int_api__property_builder_category_item button {
  background: none;
  border: none;
  color: var(--hvnly-brand-error);
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  border-radius: 2px;
  transition: all var(--hvnly-transition-time);
}

.hvnly--builder--int_api__property_builder_category_item button:hover {
  background: rgba(255, 77, 79, 0.1);
}

/* Modal help text */
.hvnly--builder--int_api__modal_help_text {
  font-size: 12px;
  color: var(--hvnly-text-secondary);
  margin-top: 5px;
  font-style: italic;
}

/* Enhanced Department/Category Styles */
.hvnly--builder--int_api__property_builder_categories {
  margin-bottom: 25px;
  padding: 20px;
  background: var(--hvnly-color-bg-light);
  border-radius: var(--hvnly-border-radius);
  border: 1px solid var(--hvnly-border-color);
}

.hvnly--builder--int_api__property_builder_category_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.hvnly--builder--int_api__property_builder_category_header h3 {
  margin: 0;
  color: var(--hvnly-text-primary);
  font-size: 18px;
  font-weight: var(--hvnly-font-weight-semibold);
}

.hvnly--builder--int_api__property_builder_category_list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hvnly--builder--int_api__property_builder_category_item {
  background: var(--hvnly-brand-primary);
  color: white;
  padding: 12px 20px;
  border-radius: var(--hvnly-border-radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--hvnly-font-weight-medium);
  box-shadow: 0 4px 12px rgba(108, 96, 254, 0.2);
  transition: all var(--hvnly-transition-time);
  border: 2px solid transparent;
}

.hvnly--builder--int_api__property_builder_category_item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(108, 96, 254, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.hvnly--builder--int_api__property_builder_category_item span {
  font-size: 14px;
  font-weight: var(--hvnly-font-weight-medium);
}

/* ==============================================
   ENHANCED EMPTY STATE & ADD TAB BUTTON STYLING
   ============================================== */
.hvnly--builder--int_api__property_builder_empty {
  text-align: center;
  padding: 60px 30px;
  color: var(--hvnly-text-secondary);
  background: linear-gradient(135deg, var(--hvnly-color-bg-light) 0%, var(--hvnly-color-bg-white) 100%);
  border-radius: var(--hvnly-border-radius);
  border: 2px dashed var(--hvnly-border-color);
  margin: 20px 0;
  transition: all var(--hvnly-transition-time);
  animation: fadeInUp 0.6s ease-out;
}

.hvnly--builder--int_api__property_builder_empty:hover {
  border-color: var(--hvnly-brand-primary);
  box-shadow: 0 8px 25px rgba(108, 96, 254, 0.1);
  transform: translateY(-3px);
}

.hvnly--builder--int_api__property_builder_empty i {
  font-size: 64px;
  margin-bottom: 20px;
  background: var(--hvnly-brand-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: pulse 2s infinite ease-in-out;
}

.hvnly--builder--int_api__property_builder_empty_btn i {
  background: var(--hvnly-color-bg-white);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: pulse 2s infinite ease-in-out;
}

.hvnly--builder--int_api__property_builder_empty p {
  margin-bottom: 25px;
  font-size: 16px;
  font-weight: var(--hvnly-font-weight-medium);
  line-height: 1.6;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  color: var(--hvnly-text-primary);
}

.hvnly--builder--int_api__property_builder_empty_btn {
  background: var(--hvnly-brand-primary);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: var(--hvnly-font-weight-semibold);
  font-family: var(--hvnly-headingFont);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all var(--hvnly-transition-time);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(108, 96, 254, 0.3);
  font-size: 16px;
  letter-spacing: 0.5px;
  text-transform: none;
}

.hvnly--builder--int_api__property_builder_empty_btn:hover {
  background: var(--hvnly-brand-primary);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(108, 96, 254, 0.4);
}

.hvnly--builder--int_api__property_builder_empty_btn:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 20px rgba(108, 96, 254, 0.3);
}

.hvnly--builder--int_api__property_builder_empty_btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 96, 254, 0.3), 
              0 8px 25px rgba(108, 96, 254, 0.3);
}

.hvnly--builder--int_api__property_builder_empty_btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}

.hvnly--builder--int_api__property_builder_empty_btn:hover::before {
  width: 300px;
  height: 300px;
}

.hvnly--builder--int_api__property_builder_empty_btn i {
  font-size: 18px;
  margin: 0;
  color: #fff;
  transition: transform 0.3s ease;
}

.hvnly--builder--int_api__property_builder_empty_btn:hover i {
  transform: rotate(90deg);
}

.hvnly--builder--int_api__property_builder_tabs + .hvnly--builder--int_api__property_builder_empty_btn {
  margin-top: 25px;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* ==============================================
   ANIMATIONS
   ============================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */
@media (max-width: 1320px) {
  .hvnly--builder--int_api__property_builder_wrapper {
    max-width: 100%;
  }
  .hvnly--builder---api_property__builder__card__container {
    max-width: 450px;
  }
  .hvnly--builder---api_property__builder___enhanced_card_preview_container {
    max-width: 450px;
  }
  .hvnly--builder---api_property__builder___preview_section {
    width: 450px;
  }
}

@media (max-width: 1120px) {
  .hvnly--builder--int_api__property_builder_modal {
    overflow: hidden;
    height: calc(100vh - 160px);
    overflow-y: auto;
  }
}

@media (max-width: 1024px) {
  .hvnly--builder--int_api__property_builder_content {
    flex-direction: column;
  }
  
  .hvnly--builder--int_api__property_builder_wrapper {
    max-width: 100%;
  }
  .hvnly--builder--int_api__property_builder_components {
    width: 95%;
  }
  .hvnly--builder--int_api__property_builder_modal {
    overflow: hidden;
    height: calc(100vh - 160px);
    overflow-y: auto;
  }
}

@media (max-width: 992px) {
  .hvnly--builder---api_property__singleProperty__builder__sidebar {
    width: 100%;
  }
}

@media (max-width: 981px) {
  .hvnly--builder--int_api__property_builder_wrapper {
    max-width: 100%;
  }
  .property-builder-sticky {
    width: calc(100% - 190px);
  }
  .hvnly--builder--int_api__property_builder_modal {
    overflow: hidden;
    height: calc(100vh - 160px);
    overflow-y: auto;
  }
  .hvnly--builder---api_property__builder__card__container {
    max-width: 100%;
  }
  .hvnly--builder---api_property__builder___enhanced_card_preview_container {
    max-width: 100%;
  }
  .hvnly--builder---api_property__builder___preview_section {
    width: 100%;
  }
}

@media (max-width: 781px) {
  .property-builder-sticky {
    width: calc(100% - 40px);
  }
  .hvnly--builder--int_api__property_builder_header {
    display: flex;
    align-items: unset;
    gap: 15px;
    flex-direction: unset;
    align-items: center;
  }
  .hvnly--builder--int_api__property_builder_header h1 {
    font-size: 14px;
    font-weight: var(--hvnly-font-weight-bold);
    font-family: var(--hvnly-headingFont);
    display: flex;
    align-items: center;
    gap: 25px;
    color: white;
    width: 50%;
  }
  .hvnly--builder---api_property__builder__card__container {
    max-width: 100%;
  }
  .hvnly--builder---api_property__builder___enhanced_card_preview_container {
    max-width: 100%;
  }
  .hvnly--builder---api_property__builder___preview_section {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .hvnly--builder--int_api__property_builder_header {
    flex-direction: unset;
    align-items: center;
    gap: 15px;
    display: flex;
  }
  
  .hvnly--builder--int_api__property_builder_header_actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .hvnly--builder--int_api__property_builder_category_list {
    gap: 8px;
  }
  
  .hvnly--builder--int_api__property_builder_category_item {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .hvnly--builder--int_api__property_builder_empty {
    padding: 40px 20px;
    margin: 15px 0;
  }
  
  .hvnly--builder--int_api__property_builder_empty i {
    font-size: 48px;
    margin-bottom: 15px;
  }
  
  .hvnly--builder--int_api__property_builder_empty p {
    font-size: 16px;
    max-width: 100%;
  }
  
  .hvnly--builder--int_api__property_builder_empty_btn {
    padding: 14px 28px;
    font-size: 15px;
  }
  .hvnly--builder---api_property__builder__card__container {
    max-width: 100%;
  }
  .hvnly--builder---api_property__builder___enhanced_card_preview_container {
    max-width: 100%;
  }
  .hvnly--builder---api_property__builder___preview_section {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .hvnly--builder--int_api__property_builder_header {
    width: calc(100% - 50px);
  }
  .hvnly--builder--int_api__property_builder_header {
    padding: 10px 30px;
  }
  .property-builder-sticky {
    top: 0px !important;
    padding: 8px 25px !important;
  }
  .hvnly--builder--int_api__property_builder_header {
    flex-direction: column;
    align-items: start;
    gap: 15px;
    display: flex;
  }
  .hvnly--builder--int_api__property_builder_header_actions {
    width: 100%;
    justify-content: space-between;
  }
  .hvnly--builder--int_api__tab_nav_tabs {
    display: flex;
    position: relative;
    flex-direction: column;
  }
  .hvnly--builder--int_api__tab_nav_tabs_wrapper {
    width: 92%;
  }
  .hvnly--builder--int_api__tab_nav_content {
    padding: 15px;
  }
  .hvnly--builder--int_api__tab_content_panel {
    max-width: 100%;
    padding: 15px;
  }
  .hvnly--builder--int_api__property_builder_section_header {
    display: flex;
    justify-content: stretch;
    align-items: center;
    margin-bottom: 20px;
    flex-direction: column;
    gap: 10px;
  }
  .hvnly--builder--int_api__property_builder_field {
    gap: 12px;
    flex-direction: column;
  }
  .hvnly--builder--int_api__property_builder_modal {
    overflow: hidden;
    height: calc(100vh - 160px);
    overflow-y: auto;
  }
  .hvnly--builder---api_property__builder__card__container {
    max-width: 100%;
  }
  .hvnly--builder---api_property__builder___enhanced_card_preview_container {
    max-width: 100%;
  }
  .hvnly--builder---api_property__builder___preview_section {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hvnly--builder--int_api__property_builder_wrapper {
    padding: 10px;
  }
  
  .hvnly--builder--int_api__property_builder_empty {
    padding: 30px 15px;
  }
  
  .hvnly--builder--int_api__property_builder_empty_btn {
    padding: 12px 24px;
    font-size: 14px;
    gap: 8px;
  }
  
  .hvnly--builder--int_api__property_builder_empty_btn i {
    font-size: 16px;
  }
}

/* ==========================================================================
   Toast Container Styles
   ========================================================================== */
.havenlytics-toast-container {
  position: fixed;
  top: 32px;
  right: 20px;
  z-index: 9999999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  width: 100%;
  pointer-events: none;
}

.havenlytics-toast-container > * {
  pointer-events: auto;
}

@media (max-width: 768px) {
  .havenlytics-toast-container {
    left: 20px;
    right: 20px;
    max-width: none;
    top: 16px;
  }
}

.havenlytics-settings-api__toast {
  display: none;
}

.hvnly--loading-overlay {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
  transition: opacity 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  .havenlytics-toast-container .toast {
    box-shadow: var(--hvnly-dark-shadow-card);
  }
}

/* ==========================================================================
   HVNLY Toast Container
   ========================================================================== */
.hvnly-toast-container {
  position: fixed;
  z-index: 9999999999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 380px;
  width: 100%;
}

@media (max-width: 768px) {
  .hvnly-toast-container {
    max-width: calc(100% - 2rem);
    width: calc(100% - 2rem);
  }
  
  .hvnly-toast-container[data-position*="top"] {
    top: 1rem !important;
    bottom: auto !important;
  }
  
  .hvnly-toast-container[data-position*="bottom"] {
    bottom: 1rem !important;
    top: auto !important;
  }
  
  .hvnly-toast-container[data-position*="center"] {
    left: 1rem !important;
    right: 1rem !important;
    transform: none !important;
    width: calc(100% - 2rem);
  }
  
  .hvnly-toast-container[data-position*="left"] {
    left: 1rem !important;
    right: auto !important;
  }
  
  .hvnly-toast-container[data-position*="right"] {
    right: 1rem !important;
    left: auto !important;
  }
}

.havenlytics-toast-container {
  display: none;
}

.havenlytics-settings-api__toast {
  display: none;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/LoadingOverlay/LoadingOverlay.module.css ***!
  \**************************************************************************************************************************************************************************************************/
.kfcZqEO6ayVIX8ALioyO.gokRmf_v8pSNtOMNLAwN .oOhKHeqnfaejKD3nQH39 {
  background: rgba(30, 30, 47, 0.85);
}
/* Preloader overlay */
.oOhKHeqnfaejKD3nQH39 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding-top: 20px;
}

.oOhKHeqnfaejKD3nQH39.M5lLaaQeEYHqtGdPlJiQ {
  opacity: 1;
  pointer-events: all;
}

/* Enhanced loader container */
.BRn2FuTWvr_wNLmsAOx3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Centered dot-pulse animation */
.nRoKDpLLkl_xQ8D699D5 {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--hvnly-brand-primary);
  color: var(--hvnly-brand-primary);
  animation: nRoKDpLLkl_xQ8D699D5 1.5s infinite linear;
  animation-delay: 0.25s;
  margin: 0 auto;
}

.nRoKDpLLkl_xQ8D699D5::before,
.nRoKDpLLkl_xQ8D699D5::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--hvnly-brand-primary);
  color: var(--hvnly-brand-primary);
}

.nRoKDpLLkl_xQ8D699D5::before {
  left: -24px;
  animation: wKQD9Iujbbvi3DeTfVIC 1.5s infinite linear;
}

.nRoKDpLLkl_xQ8D699D5::after {
  left: 24px;
  animation: stYzaplnCrqKxkFwytkg 1.5s infinite linear;
}

@keyframes wKQD9Iujbbvi3DeTfVIC {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes stYzaplnCrqKxkFwytkg {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes nRoKDpLLkl_xQ8D699D5 {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Centered loader text */
.s03cHeE7iSmRXDDKMuBq {
  color: var(--hvnly-brand-primary);
  font-weight: var(--hvnly-font-weight-medium);
  text-align: center;
  font-size: 16px;
  letter-spacing: 1px;
  margin: 0;
  width: 100%;
}
/*!*************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/Toast/Toast.css ***!
  \*************************************************************************************************************************************************************************/
/* ==========================================================================
   HVNLY Toast System - Custom Design
   Based on provided HTML/CSS with hvnly-* prefix
   ========================================================================== */


/* Toast Container positioning */
.hvnly-toast-container {
  position: fixed;
  z-index: 9999999999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 380px;
  width: 100%;
}

/* Toast Base Styles */
.hvnly-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 70px;
  padding: 1rem 1.5rem 1rem 1.2rem !important;
  box-shadow: 0 20px 35px -12px rgba(0, 40, 60, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.6) inset  !important;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1c2a3a;
  width: 100%;
  transition: all 0.25s ease;
  border-left: 5px solid transparent;
  animation: hvnlyToastPop 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  margin-bottom: 0.8rem;
}

/* Exit animation */
.hvnly-toast.hvnly-toast-exit {
  animation: hvnlyToastFadeOut 0.2s ease forwards;
}

@keyframes hvnlyToastFadeOut {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.92) translateY(10px); }
}

@keyframes hvnlyToastPop {
  0% { opacity: 0; transform: scale(0.92) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================
   SUCCESS TOAST
   ============================================ */
.hvnly-toast.success {
  border-left-color: #16a34a;
  background: linear-gradient(145deg, #f3fcf7, #f0f9f2);
}

.hvnly-toast.success .hvnly-toast-icon {
  background: #b9e6c7;
  color: #0b6b3a;
}

/* ============================================
   ERROR TOAST - FIXED
   ============================================ */
.hvnly-toast.error {
  border-left-color: #dc2626;
  background: linear-gradient(145deg, #fef7f7, #fff3f3);
}

.hvnly-toast.error .hvnly-toast-icon {
  background: #fcd7d7;
  color: #a12323;
}

/* ============================================
   WARNING TOAST
   ============================================ */
.hvnly-toast.warning {
  border-left-color: #f59e0b;
  background: linear-gradient(145deg, #fffbeb, #fef3c7);
}

.hvnly-toast.warning .hvnly-toast-icon {
  background: #feebc8;
  color: #b45309;
}

/* ============================================
   INFO TOAST
   ============================================ */
.hvnly-toast.info {
  border-left-color: #3b82f6;
  background: linear-gradient(145deg, #eff6ff, #dbeafe);
}

.hvnly-toast.info .hvnly-toast-icon {
  background: #dbeafe;
  color: #1e40af;
}

/* Toast icon wrapper */
.hvnly-toast .hvnly-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 40px;
  flex-shrink: 0;
}

/* Toast content */
.hvnly-toast .hvnly-toast-content {
  flex: 1;
}

.hvnly-toast .hvnly-toast-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.hvnly-toast .hvnly-toast-description {
  font-size: 0.75rem;
  font-weight: 400;
  color: #556f88;
  margin-top: 2px;
}

/* Close button */
.hvnly-toast .hvnly-toast-close {
  background: transparent;
  border: none;
  color: #8fa3bc;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.hvnly-toast .hvnly-toast-close:hover {
  color: #1e2f43;
  background: #e3ebf5;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
.dark-mode .hvnly-toast,
body.dark-mode .hvnly-toast {
  background: rgba(30, 30, 47, 0.95);
  border: 1px solid rgba(68, 68, 68, 0.8);
  color: #f0f0f0;
  box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.4);
}

.dark-mode .hvnly-toast .hvnly-toast-description,
body.dark-mode .hvnly-toast .hvnly-toast-description {
  color: #b0b0b0;
}

.dark-mode .hvnly-toast .hvnly-toast-close,
body.dark-mode .hvnly-toast .hvnly-toast-close {
  color: #8a9bb5;
}

.dark-mode .hvnly-toast .hvnly-toast-close:hover,
body.dark-mode .hvnly-toast .hvnly-toast-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Dark mode - Success */
.dark-mode .hvnly-toast.success,
body.dark-mode .hvnly-toast.success {
  background: linear-gradient(145deg, #1a3a2a, #1f4530);
  border-left-color: #2ecc71;
}

.dark-mode .hvnly-toast.success .hvnly-toast-icon,
body.dark-mode .hvnly-toast.success .hvnly-toast-icon {
  background: #2ecc71;
  color: #1a3a2a;
}

/* Dark mode - Error */
.dark-mode .hvnly-toast.error,
body.dark-mode .hvnly-toast.error {
  background: linear-gradient(145deg, #3f2323, #4a2929);
  border-left-color: #e74c3c;
}

.dark-mode .hvnly-toast.error .hvnly-toast-icon,
body.dark-mode .hvnly-toast.error .hvnly-toast-icon {
  background: #e74c3c;
  color: #3f2323;
}

/* Dark mode - Warning */
.dark-mode .hvnly-toast.warning,
body.dark-mode .hvnly-toast.warning {
  background: linear-gradient(145deg, #3d3520, #4a3d25);
  border-left-color: #f59e0b;
}

.dark-mode .hvnly-toast.warning .hvnly-toast-icon,
body.dark-mode .hvnly-toast.warning .hvnly-toast-icon {
  background: #f59e0b;
  color: #3d3520;
}

/* Dark mode - Info */
.dark-mode .hvnly-toast.info,
body.dark-mode .hvnly-toast.info {
  background: linear-gradient(145deg, #1a2a4a, #1f3545);
  border-left-color: #3b82f6;
}

.dark-mode .hvnly-toast.info .hvnly-toast-icon,
body.dark-mode .hvnly-toast.info .hvnly-toast-icon {
  background: #3b82f6;
  color: #1a2a4a;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hvnly-toast-container {
    max-width: calc(100% - 2rem);
    width: calc(100% - 2rem);
  }
  
  .hvnly-toast {
    padding: 0.875rem 1.25rem 0.875rem 1rem;
  }
  
  .hvnly-toast .hvnly-toast-title {
    font-size: 0.875rem;
  }
  
  .hvnly-toast .hvnly-toast-description {
    font-size: 0.7rem;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .hvnly-toast,
  .hvnly-toast.hvnly-toast-exit {
    animation: none;
  }
}


/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/utils/builderPreloader.css ***!
  \************************************************************************************************************************************************************************************/
/* Professional Preloader Styles using Havenlytics Variables */
.hvnly-preloader-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--hvnly-color-bg-white) !important;
  backdrop-filter: blur(0px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999 !important;
  font-family: var(--hvnly-font-family-base);
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease-out;
}

/* Ensure coverage over WordPress admin bar */
.hvnly-preloader-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hvnly-color-bg-white);
  z-index: -1;
}

/* Exit animation - simple fade out without transform */
.hvnly-preloader-container.exiting {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.hvnly-preloader-content {
  background: var(--hvnly-color-bg-white);
  border-radius: var(--hvnly-border-radius);
  padding: 2.5rem;
  box-shadow: var(--hvnly-shadow-card);
  border: 1px solid var(--hvnly-border-color);
  max-width: 390px;
  width: 90%;
  text-align: center;
  animation: hvnly-content-appear 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  z-index: 1000000;
}

@keyframes hvnly-content-appear {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Elegant Spinner */
.hvnly-preloader-spinner {
  margin-bottom: 1.5rem;
}

.hvnly-spinner-circle {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border: 3px solid var(--hvnly-color-bg-light);
  border-top: 3px solid var(--hvnly-brand-primary);
  border-radius: 50%;
  animation: hvnly-spin 1s linear infinite;
}

@keyframes hvnly-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Content Styles */
.hvnly-preloader-info {
  margin-bottom: 1.5rem;
}

.hvnly-preloader-title {
  font-size: 1.5rem;
  font-weight: var(--hvnly-font-weight-semibold);
  color: var(--hvnly-text-primary);
  margin: 0 0 0.5rem 0;
  font-family: var(--hvnly-font-family-heading);
  background: linear-gradient(135deg, var(--hvnly-brand-primary) 0%, var(--hvnly-brand-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hvnly-preloader-stage {
  font-size: 0.95rem;
  color: var(--hvnly-text-secondary);
  margin: 0 0 1.5rem 0;
  font-weight: var(--hvnly-font-weight-medium);
  min-height: 24px;
}

/* Progress Bar */
.hvnly-progress-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hvnly-progress-track {
  flex: 1;
  height: 4px;
  background: var(--hvnly-border-color);
  border-radius: 2px;
  overflow: hidden;
}

.hvnly-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--hvnly-brand-primary), var(--hvnly-brand-secondary));
  border-radius: 2px;
  transition: width 0.3s ease;
  position: relative;
}

.hvnly-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: hvnly-progress-shine 1.5s ease-in-out infinite;
}

@keyframes hvnly-progress-shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.hvnly-progress-text {
  font-size: 0.875rem;
  font-weight: var(--hvnly-font-weight-bold);
  color: var(--hvnly-brand-primary);
  min-width: 35px;
}

/* Tips Section */
.hvnly-preloader-tips {
  padding: 0.75rem;
  background: var(--hvnly-color-bg-light);
  border-radius: var(--hvnly-border-radius-sm);
  border-left: 3px solid var(--hvnly-brand-primary);
}

.hvnly-preloader-tips p {
  font-size: 0.85rem;
  color: var(--hvnly-text-secondary);
  margin: 0;
  line-height: 1.4;
  font-weight: var(--hvnly-font-weight-medium);
}

/* Dark mode support - preloader always white */
@media (prefers-color-scheme: dark) {
  .hvnly-preloader-container {
    background: var(--hvnly-color-bg-white) !important;
  }
  
  .hvnly-preloader-container::before {
    background: var(--hvnly-color-bg-white);
  }
  
  .hvnly-preloader-content {
    background: var(--hvnly-color-bg-white);
    border-color: var(--hvnly-border-color);
    box-shadow: var(--hvnly-shadow-card);
  }
  
  .hvnly-preloader-title {
    color: var(--hvnly-text-primary);
  }
  
  .hvnly-preloader-stage {
    color: var(--hvnly-text-secondary);
  }
  
  .hvnly-spinner-circle {
    border-color: var(--hvnly-color-bg-light);
    border-top-color: var(--hvnly-brand-primary);
  }
  
  .hvnly-progress-track {
    background: var(--hvnly-border-color);
  }
  
  .hvnly-progress-text {
    color: var(--hvnly-brand-primary);
  }
  
  .hvnly-preloader-tips {
    background: var(--hvnly-color-bg-light);
  }
  
  .hvnly-preloader-tips p {
    color: var(--hvnly-text-secondary);
  }
}

/* Responsive Design */
@media (max-width: 480px) {
  .hvnly-preloader-content {
    padding: 2rem 1.5rem;
    margin: 1rem;
  }
  
  .hvnly-preloader-title {
    font-size: 1.3rem;
  }
  
  .hvnly-progress-container {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .hvnly-progress-text {
    text-align: center;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .hvnly-spinner-circle {
    animation: none;
    border-top-color: var(--hvnly-brand-primary);
  }
  
  .hvnly-progress-bar::after {
    animation: none;
  }
  
  .hvnly-preloader-content {
    animation: none;
  }
  
  .hvnly-preloader-container.exiting {
    transition: none;
  }
}

/*# sourceMappingURL=builder.css.map*/