/*#omx eyJhbGciOiJITUFDLVNIQTI1NiIsInBheWxvYWQiOnsib3duZXIiOiJKZXPDunMgT3J0ZWdhIE1hdGV1IiwiZG5pIjoiNzQzNzkyMjJNIiwibGljZW5zZSI6IkxpY2VuY2lhIHJlc2VydmFkYSAvIFByb3BpZWRhZCBpbnRlbGVjdHVhbCIsIm9yaWdpbiI6Ik9NXzc0Mzc5MjIyTSIsImJ1aWxkIjoiMjAyNi0wMy0wOF8wMTA0MDAiLCJmaWxlIjoiOGVkODc4NTgyNiIsInBhdGgiOiJhc3NldHMvY3NzL2ludml0YXRpb25NYW5hZ2VyLmNzcyJ9LCJzaWciOiI0NTMzYWE5YjZjZGRmM2ZlMjkyYzM3MTkyNDljMTkwN2RkMGZlYmNiOTQwOGNhNDc4ZTcxNzYxMTYzMGY0ZjA0In0=*/
@import url("invitation_general.css");

.floating-label.price{
    position: absolute;
    top: -10px;
    left: -18px;
    background-color: #f54195;
    color: white;
    padding: 5px 10px;
    font-weight: bolder;
    border-radius: 20px;
    z-index: 1;
}

#invitation-preview {
    position: relative;
    overflow: hidden; /* Opcional: evita que la imagen se salga del contenedor */
    padding: 20px;
    /*border: 1px solid #ccc; */
    margin-top: 20px;
}

#InvitationManager_MainPanelBody{
  /* padding: 10px !important; */
}

#services .individualService_cost{
  padding-left: 0px !important;
  padding-right: 0px !important;
  font-weight: bolder;
  font-size: 14px;
}

#TotalAmount_container{
    background-color: #e5bbc7;
    padding: 10px;
    border-radius: 16px;
}

#generalBackgroundImageConfig_Stage_DataSection .swiper, #EventLocations_section .swiper,
.popup-HTML_detail .swiper{ padding: 16px; }

#EventLocations_section .mapTypeSelector_container{ background-color: white; }

.swiper.selectableImage .swiper-slide img, .swiper.selectableImage .swiper-slide svg{
  max-height: 150px !important;
}

#generalBackgroundImageConfig_Stage_DataSection .selectableImage.swiper .swiper-slide.bo-bg-preview-active {
    background-color: #f6f7fb;
    transition: background-size 220ms ease, background-position 220ms ease;
    will-change: background-size, background-position;
}

#generalBackgroundImageConfig_Stage_DataSection .selectableImage.swiper .swiper-slide.bo-bg-preview-active img {
    transition: opacity 180ms ease;
}

#InvitationTemplateSelector_Wrapper {
    counter-reset: templateCard;
}

#InvitationTemplateSelector_Wrapper .swiper-slide {
    box-shadow: none !important;
    padding: 10px 6px;
    width: auto !important;
}

#InvitationTemplateSelector_Wrapper .invitationTemplate {
    counter-increment: templateCard;
    --template-preview-width: 200px;
    --template-preview-height: 400px;
    background: #fff;
    border: 1px solid #f0dbe5;
    border-radius: 20px;
    padding: 6px 12px 14px;
    box-shadow: 0 12px 24px rgba(60, 30, 45, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

#InvitationTemplateSelector_Wrapper .mobile-preview_1 {
    order: 3;
    width: var(--template-preview-width);
    height: var(--template-preview-height);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.15);
}

#InvitationTemplateSelector_Wrapper .invitationTemplate_title {
    order: 1;
    width: var(--template-preview-width);
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2px 0;
    border-radius: 0;
    background: transparent;
    border: none;
    color: #2b2b2b;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#InvitationTemplateSelector_Wrapper .invitationTemplate_title::before {
    content: counter(templateCard);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f0a5c3;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

#InvitationTemplateSelector_Wrapper .actions {
    order: 2;
    width: var(--template-preview-width);
    padding-top: 2px;
    display: flex;
    gap: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

#InvitationTemplateSelector_Wrapper .btnViewTemplateDetail_container,
#InvitationTemplateSelector_Wrapper .btnSelectTemplate_container {
    float: none;
    width: auto;
    flex: 1 1 0%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 0;
    border: none;
    cursor: pointer;
}

#InvitationTemplateSelector_Wrapper .btnViewTemplateDetail_container {
    background: #f7eef3;
    border-radius: 999px 0 0 999px;
    border-right: none;
    padding-right: 18px;
    z-index: 1;
    position: relative;
}

#InvitationTemplateSelector_Wrapper .btnSelectTemplate_container {
    background: linear-gradient(135deg, #dc6e98 0%, #f1a9c2 100%);
    color: #fff;
    box-shadow: 0 8px 16px rgba(220, 110, 152, 0.28);
    border-radius: 999px;
    margin-left: -14px;
    padding-left: 16px;
    z-index: 1;
    position: relative;
}

#InvitationTemplateSelector_Wrapper .actions img {
    display: none;
}

#InvitationTemplateSelector_Wrapper .actions i {
    display: none;
}

#InvitationTemplateSelector_Wrapper .actions p {
    margin: 0;
    font-size: 12px;
    font-weight: bolder;
}

#InvitationTemplateSelector_Wrapper .btnViewTemplateDetail_container p {
    color: #6b5662;
}

#InvitationTemplateSelector_Wrapper .btnSelectTemplate_container p {
    color: #fff;
}

/* Template preview modal */
#TemplatePreviewMobile_modal .popup-content {
    width: 96%;
    max-width: 460px;
    margin: 14px auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

#TemplatePreviewMobile_modal .tpv-shell {
    display: flex;
    justify-content: center;
    padding: 8px;
}

#TemplatePreviewMobile_modal[data-device="tablet"] .popup-content {
    max-width: 820px;
}

#TemplatePreviewMobile_modal[data-device="laptop"] .popup-content {
    max-width: 1200px;
}

#TemplatePreviewMobile_modal[data-device="desktop"] .popup-content {
    max-width: 1280px;
}

#TemplatePreviewMobile_modal {
    --tpv-frame-image: url('/assets/images/deviceMockups/phone_frame_generated_v1_512w_q50.webp');
    --tpv-frame-size: cover;
    --tpv-frame-rotate: none;
    --tpv-frame-scale: 1;
    --tpv-phone-max-width: 380px;
    --tpv-phone-height: 86vh;
    --tpv-phone-max-height: 760px;
    --tpv-phone-radius: 36px;
    --tpv-screen-radius: 28px;
    --tpv-inset-top: 33px;
    --tpv-inset-right: 13px;
    --tpv-inset-bottom: 30px;
    --tpv-inset-left: 13px;
}

#TemplatePreviewMobile_modal[data-device="tablet"] {
    --tpv-frame-image: url('/assets/images/deviceMockups/tablet_1.png');
    --tpv-frame-size: contain;
    --tpv-frame-rotate: rotate(90deg);
    --tpv-frame-scale: 1.12;
    --tpv-phone-max-width: 620px;
    --tpv-phone-height: 78vh;
    --tpv-phone-max-height: 700px;
    --tpv-phone-ratio: 0.717;
    --tpv-phone-radius: 28px;
    --tpv-screen-radius: 18px;
    --tpv-inset-top: 6%;
    --tpv-inset-right: 8%;
    --tpv-inset-bottom: 6%;
    --tpv-inset-left: 8%;
}

#TemplatePreviewMobile_modal[data-device="laptop"] {
    --tpv-frame-image: url('/assets/images/deviceMockups/laptop_4.png');
    --tpv-frame-size: contain;
    --tpv-phone-max-width: 1200px;
    --tpv-phone-height: 76vh;
    --tpv-phone-max-height: 760px;
    --tpv-phone-ratio: 1.455;
    --tpv-phone-radius: 18px;
    --tpv-screen-radius: 6px;
    --tpv-inset-top: 6%;
    --tpv-inset-right: 12%;
    --tpv-inset-bottom: 9%;
    --tpv-inset-left: 12%;
}

#TemplatePreviewMobile_modal[data-device="desktop"] {
    --tpv-frame-image: url('/assets/images/deviceMockups/pc_2.png');
    --tpv-frame-size: contain;
    --tpv-phone-max-width: 1280px;
    --tpv-phone-height: 76vh;
    --tpv-phone-max-height: 780px;
    --tpv-phone-ratio: 1.261;
    --tpv-phone-radius: 18px;
    --tpv-screen-radius: 6px;
    --tpv-inset-top: 6%;
    --tpv-inset-right: 11%;
    --tpv-inset-bottom: 22%;
    --tpv-inset-left: 11%;
}

#TemplatePreviewMobile_modal .tpv-phone {
    width: min(92vw, var(--tpv-phone-max-width));
    max-width: var(--tpv-phone-max-width);
    height: var(--tpv-phone-height);
    max-height: var(--tpv-phone-max-height);
    background-color: transparent;
    background: transparent;
    border-radius: var(--tpv-phone-radius);
    padding: 0;
    /*box-shadow: 0 20px 50px rgba(38, 24, 32, 0.25); */
    position: relative;
}

#TemplatePreviewMobile_modal[data-device="tablet"] .tpv-phone,
#TemplatePreviewMobile_modal[data-device="laptop"] .tpv-phone,
#TemplatePreviewMobile_modal[data-device="desktop"] .tpv-phone {
    height: auto;
    aspect-ratio: var(--tpv-phone-ratio);
    top: -40px;
}

#TemplatePreviewMobile_modal .tpv-phone::before {
    z-index: 4 !important;
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--tpv-frame-image);
    background-size: var(--tpv-frame-size);
    background-position: center;
    background-repeat: no-repeat;
    transform: var(--tpv-frame-rotate) scale(var(--tpv-frame-scale));
    transform-origin: center;
    pointer-events: none;
}

#TemplatePreviewMobile_modal .tpv-app {
    position: absolute;
    top: var(--tpv-inset-top);
    right: var(--tpv-inset-right);
    bottom: var(--tpv-inset-bottom);
    left: var(--tpv-inset-left);
    background: transparent;
    border-radius: var(--tpv-screen-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#TemplatePreviewMobile_modal .tpv-device {
    position: relative;
}

#TemplatePreviewMobile_modal .tpv-device-btn {
    min-height: 36px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f8eff5;
    border: 1px solid #f1dbe7;
    color: #8a7582;
    font-size: 12px;
    gap: 6px;
}

#TemplatePreviewMobile_modal .tpv-device-label {
    font-weight: 600;
}

#TemplatePreviewMobile_modal .tpv-device-caret {
    font-size: 10px;
}

#TemplatePreviewMobile_modal .tpv-device-menu {
    position: absolute;
    right: 0;
    top: 44px;
    min-width: 170px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(233, 214, 225, 0.7);
    box-shadow: 0 14px 30px rgba(45, 29, 39, 0.2);
    z-index: 9;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#TemplatePreviewMobile_modal .tpv-device-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#TemplatePreviewMobile_modal .tpv-device-item {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    background: #fff;
    font-size: 12px;
    color: #5f4b56;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

#TemplatePreviewMobile_modal .tpv-device-item.is-selected {
    background: #f7e2ec;
    color: #b56f8e;
    font-weight: 600;
}

@media (max-width: 820px) {
    #TemplatePreviewMobile_modal .tpv-device {
        display: none;
    }
}



#TemplatePreviewMobile_modal .tpv-hidden-close {
    display: none;
}

#TemplatePreviewMobile_modal .tpv-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 2px;
    padding-top: 4px;
    padding: 12px 12px 10px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(233, 214, 225, 0.7);
    backdrop-filter: blur(6px);
    position: relative;
    z-index: 3;
    overflow: visible;
}

#TemplatePreviewMobile_modal .tpv-title {
    flex: 1;
    text-align: center;
    min-width: 0;
}

#TemplatePreviewMobile_modal .tpv-title-main {
    font-size: 16px;
    font-weight: 600;
    color: #4c3d47;
    line-height: 20px;
}

#TemplatePreviewMobile_modal .tpv-title-sub {
    font-size: 12px;
    color: #7a6b75;
    line-height: 16px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#TemplatePreviewMobile_modal .tpv-title-sub.is-hidden {
    display: none;
}

#TemplatePreviewMobile_modal .tpv-btn {
    border: 0;
    background: transparent;
    font-size: 13px;
    color: #6b5662;
    font-weight: 600;
    min-height: 44px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#TemplatePreviewMobile_modal .tpv-back {
    padding-left: 4px;
}

#TemplatePreviewMobile_modal .tpv-back-icon {
    font-size: 18px;
    line-height: 1;
}

#TemplatePreviewMobile_modal .tpv-more {
    width: 44px;
    justify-content: center;
    font-size: 18px;
}

#TemplatePreviewMobile_modal .tpv-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px 0;
    background: #fff;
    border-top: 1px solid rgba(238, 222, 231, 0.9);
    margin-top: auto;
    position: relative;
    z-index: 2;
}

#TemplatePreviewMobile_modal .tpv-nav-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

#TemplatePreviewMobile_modal .tpv-nav-btn {
    background: #f8eff5;
    border: 1px solid #f1dbe7;
    border-radius: 999px;
    min-width: 44px;
    padding: 6px 12px;
    color: #b56f8e;
}

#TemplatePreviewMobile_modal .tpv-nav-text {
    font-size: 11px;
    color: #8a7582;
}

#TemplatePreviewMobile_modal .tpv-nav-icon {
    font-size: 16px;
}

#TemplatePreviewMobile_modal .tpv-counter {
    font-size: 12px;
    font-weight: 600;
    color: #8a7582;
    order: 0;
}

#TemplatePreviewMobile_modal .tpv-screen {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    background: #fff;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #d7a0b8 #f6e8ef;
    position: relative;
    z-index: 1;
}

#TemplatePreviewMobile_modal .tpv-frame {
    position: sticky;
    top: 0;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
}

#TemplatePreviewMobile_modal .tpv-screen iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--tpv-screen-radius);
    background: #fff;
    display: block;
}

#TemplatePreviewMobile_modal .tpv-scroll-spacer {
    height: 0;
    width: 1px;
}

#TemplatePreviewMobile_modal .tpv-screen::-webkit-scrollbar {
    width: 8px;
}

#TemplatePreviewMobile_modal .tpv-screen::-webkit-scrollbar-track {
    background: #f6e8ef;
    border-radius: 999px;
    margin: 10px 0 18px;
}

#TemplatePreviewMobile_modal .tpv-screen::-webkit-scrollbar-thumb {
    background: #d7a0b8;
    border-radius: 999px;
    border: 2px solid #f6e8ef;
}

#TemplatePreviewMobile_modal .tpv-fab {
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, #f1a9c2 0%, #dc6e98 100%);
    box-shadow: 0 12px 22px rgba(220, 110, 152, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    order: 1;
}

#TemplatePreviewMobile_modal .tpv-fab:active {
    transform: scale(0.98);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

#TemplatePreviewMobile_modal .tpv-menu {
    position: absolute;
    top: 64px;
    right: 16px;
    min-width: 170px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(233, 214, 225, 0.7);
    box-shadow: 0 14px 30px rgba(45, 29, 39, 0.2);
    z-index: 5;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#TemplatePreviewMobile_modal .tpv-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#TemplatePreviewMobile_modal .tpv-menu-item {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: 0;
    background: #fff;
    font-size: 13px;
    color: #5f4b56;
    cursor: pointer;
}

#TemplatePreviewMobile_modal .tpv-menu-item:hover {
    background: #faf2f6;
}

#TemplatePreviewMobile_modal .tpv-menu-action:hover {
    background: #faf2f6;
}

#TemplatePreviewMobile_modal .tpv-menu-item--split {
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: #fff;
}

#TemplatePreviewMobile_modal .tpv-menu-action {
    border: 0;
    background: transparent;
    padding: 12px 14px;
    font-size: 13px;
    color: #5f4b56;
    cursor: pointer;
}

#TemplatePreviewMobile_modal .tpv-menu-share {
    flex: 1;
    text-align: left;
}

#TemplatePreviewMobile_modal .tpv-menu-copy {
    width: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(233, 214, 225, 0.7);
}

#TemplatePreviewMobile_modal .tpv-menu-copy.is-selected {
    background: #f7e2ec;
    color: #b56f8e;
}

#TemplatePreviewMobile_modal .tpv-toast {
    position: absolute;
    left: 50%;
    bottom: 74px;
    transform: translateX(-50%) translateY(8px);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(57, 45, 52, 0.92);
    color: #fff;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#TemplatePreviewMobile_modal .tpv-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#TemplatePreviewMobile_modal .tpv-btn:focus-visible,
#TemplatePreviewMobile_modal .tpv-fab:focus-visible,
#TemplatePreviewMobile_modal .tpv-menu-item:focus-visible {
    outline: 2px solid #dc6e98;
    outline-offset: 2px;
}

#TemplatePreviewMobile_modal .tpv-btn:active,
#TemplatePreviewMobile_modal .tpv-nav-btn:active {
    transform: scale(0.98);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
}

#TemplatePreviewMobile_modal .tpv-nav-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

#TemplatePreviewMobile_modal.template-preview--direct .popup-content {
    width: 100%;
    max-width: none;
    height: 100vh;
    margin: 0;
    padding: 0;
}

#TemplatePreviewMobile_modal.template-preview--direct .tpv-phone {
    height: 100vh;
    max-height: none;
    border-radius: 0;
    padding: 0;
    background: #fff;
    box-shadow: none;
}

#TemplatePreviewMobile_modal.template-preview--direct .tpv-app {
    border-radius: 0;
}

#TemplatePreviewMobile_modal.template-preview--direct .tpv-screen {
    padding: 0;
}

#TemplatePreviewMobile_modal.template-preview--direct .tpv-frame {
    padding: 0;
}

#TemplatePreviewMobile_modal.template-preview--direct .tpv-screen iframe {
    border-radius: 0;
    pointer-events: auto;
}

.template-preview-iframe {
    width: 100%;
    height: 70vh;
}

.template-preview-iframe iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
}

img.viewTemplateDetail, img.selectTemplate{ width: 24px; }

#InvitationTemplateSelector_Container .swiper-button-next, #ProposalHotels_Container .swiper-button-prev{
    top: var(--swiper-navigation-top-offset, 60%);
}

#InvitationTemplateSelector_Container .swiper-button-next{
    top: var(--swiper-navigation-top-offset, 60%);
    right: var(--swiper-navigation-left-offset, 0%);
}

#InvitationTemplateSelector_Container .swiper-button-prev{
    top: var(--swiper-navigation-top-offset, 60%);
    left: var(--swiper-navigation-left-offset, 0%);
}

.serviceDetail p{
    height: 60px; /* Cambia 60px por el máximo de altura deseado */
    overflow: hidden; /* Oculta el contenido que exceda el área */
    text-overflow: ellipsis; /* Agrega puntos suspensivos al contenido recortado */
    text-align: justify;
    display: -webkit-box; /* Necesario para usar -webkit-line-clamp */
    -webkit-line-clamp: 3; /* Número de líneas que se mostrarán */
    -webkit-box-orient: vertical; /* Orientación del recorte */
    white-space: normal; /* Asegúrate de que el texto pueda hacer saltos de línea */
}

#template-content input:not([type=checkbox]), #template-content textarea {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit;
    width: 100% !important;
    /*text-align: center; */
    /*margin-left: 20px !important; */
}

#template-content input.clasicInput, #template-content textarea.clasicInput {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    padding: 5px;
    box-sizing: border-box;
    margin-top: 10px;
}

img.editableItem, svg.editableItem, .section-separator.editableItem, #invitation-preview .editableBackgroundImage.editableItem{
    border: 2px dashed #ccc;
    /*padding: 10px; */
}

#invitation-preview .bo-image-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 6px 0 8px;
    padding: 0 8px;
}

#invitation-preview .bo-image-list-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(232, 86, 151, 0.28);
    background: #fff;
    color: #6c3b55;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

#invitation-preview .bo-image-list-dropdown-wrap {
    position: relative;
    display: inline-flex;
}

#invitation-preview .bo-image-list-action .bo-action-caret {
    font-size: 11px;
    margin-left: 2px;
    opacity: 0.85;
}

#invitation-preview .bo-image-list-action[aria-expanded="true"] .bo-action-caret {
    transform: rotate(180deg);
}

#invitation-preview .bo-image-list-action:hover {
    border-color: rgba(232, 86, 151, 0.6);
    color: #e85697;
}

#invitation-preview .bo-image-list-action i {
    color: inherit;
    font-size: 13px;
}

#invitation-preview .bo-image-list-action.danger {
    color: #b73b5b;
    border-color: rgba(183, 59, 91, 0.26);
}

#invitation-preview .bo-image-list-dropdown {
    position: absolute;
    z-index: 15;
    top: calc(100% + 6px);
    left: 0;
    min-width: 188px;
    background: #fff;
    border: 1px solid rgba(232, 86, 151, 0.28);
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    padding: 6px;
}

#invitation-preview .bo-image-list-dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 10px;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #5f3a4f;
    padding: 6px 10px;
    text-align: left;
    cursor: pointer;
}

#invitation-preview .bo-image-list-dropdown-item:hover {
    background: #fdf0f7;
    color: #c84582;
}

#invitation-preview .bo-image-list-dropdown-item.is-active {
    background: #ea4f93;
    color: #ffffff;
}

#invitation-preview .bo-image-list-dropdown-item.is-active i {
    color: #ffffff;
}

#invitation-preview .section.bo-image-list-active .img_container {
    position: relative;
    margin-top: 2px;
    padding-top: 14px;
    padding-bottom: 14px;
}

#invitation-preview .section.bo-image-list-active .img_container::before,
#invitation-preview .section.bo-image-list-active .img_container::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    border-top: 2px dashed rgba(232, 86, 151, 0.45);
    pointer-events: none;
}

#invitation-preview .section.bo-image-list-active .img_container::before {
    top: 0;
}

#invitation-preview .section.bo-image-list-active .img_container::after {
    bottom: 0;
}

#invitation-preview #Invitation_sections {
    position: relative;
}

#invitation-preview #Invitation_sections::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--generalBackground-image, none);
    background-size: var(--generalBackground-image-size, cover);
    background-position: var(--generalBackground-image-position, center center);
    background-attachment: var(--generalBackground-image-attachment, fixed);
    background-repeat: var(--generalBackground-image-repeat, no-repeat);
    opacity: var(--generalBackground-image-opacity, 1);
    z-index: 0;
    pointer-events: none;
}

#invitation-preview #Invitation_sections > * {
    position: relative;
    z-index: 1;
}

#invitation-preview .section[class*="bo-list-mode-"]:not(.bo-list-mode-slider) .img_container.bo-list-static {
    display: grid;
    gap: 10px;
    width: 100%;
}

#invitation-preview .section[class*="bo-list-mode-"]:not(.bo-list-mode-slider) .img_container.bo-list-static .bo-list-item {
    margin: 0;
    width: 100%;
}

#invitation-preview .section[class*="bo-list-mode-"]:not(.bo-list-mode-slider) .img_container.bo-list-static .bo-list-item > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

#invitation-preview .section.bo-list-mode-mosaic .img_container.bo-list-static {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

#invitation-preview .section.bo-list-mode-mosaic .img_container.bo-list-static .bo-list-item {
    aspect-ratio: 1 / 1;
}

#invitation-preview .section.bo-list-mode-compact .img_container.bo-list-static {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

#invitation-preview .section.bo-list-mode-compact .img_container.bo-list-static .bo-list-item {
    aspect-ratio: 1 / 1;
}

#invitation-preview .section.bo-list-mode-cards .img_container.bo-list-static {
    grid-template-columns: 1fr;
    gap: 12px;
}

#invitation-preview .section.bo-list-mode-cards .img_container.bo-list-static .bo-list-item {
    aspect-ratio: 16 / 10;
}

#invitation-preview .section.bo-list-mode-tetris .img_container.bo-list-static {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 78px;
}

#invitation-preview .section.bo-list-mode-tetris .img_container.bo-list-static .bo-list-item {
    grid-column: span 1;
    grid-row: span 2;
}

#invitation-preview .section.bo-list-mode-tetris .img_container.bo-list-static .bo-list-item:nth-child(5n+1) {
    grid-column: span 2;
}

#invitation-preview .section.bo-list-mode-tetris .img_container.bo-list-static .bo-list-item:nth-child(6n+4) {
    grid-row: span 3;
}

#invitation-preview .section.bo-list-mode-cascade .img_container.bo-list-static {
    display: block;
    column-count: 2;
    column-gap: 10px;
}

#invitation-preview .section.bo-list-mode-cascade .img_container.bo-list-static .bo-list-item {
    break-inside: avoid;
    margin-bottom: 10px;
}

#invitation-preview .section.bo-list-mode-cascade .img_container.bo-list-static .bo-list-item:nth-child(3n+2) {
    aspect-ratio: 3 / 4;
}

#invitation-preview .section.bo-list-mode-cascade .img_container.bo-list-static .bo-list-item:nth-child(3n+1) {
    aspect-ratio: 1 / 1;
}

#invitation-preview .section.bo-list-mode-cascade .img_container.bo-list-static .bo-list-item:nth-child(3n) {
    aspect-ratio: 4 / 3;
}

@media (max-width: 768px) {
    #invitation-preview .section.bo-list-mode-mosaic .img_container.bo-list-static {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #invitation-preview .section.bo-list-mode-compact .img_container.bo-list-static {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #invitation-preview .section.bo-list-mode-tetris .img_container.bo-list-static {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 72px;
    }
}

.popup-content .swiper-slide svg{
    width: 100%;
    height: auto;
    display: block;
    max-height: 160px; /* 100%; */
}

img.decoration-frame{
    border-radius: 100%;
}

.selectedItem{ border-color: var(--main-tertiary-color); }

p.editableItem, h1.editableItem, h2.editableItem,h3.editableItem, h4.editableItem, 
h5.editableItem, h6.editableItem, input.modernInput, textarea.modernInput {
  border: 2px dashed #ccc !important; /*     border: 3px dotted #ccc; */
  /*background: rgba(255, 255, 255, 0.8) !important; */
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
  box-sizing: border-box !important;
  margin-top: 10px !important;
}

#stickyHeaderBar_GeneralConfig {
    position: fixed;
    z-index: 1000;
    top: 60px; /* Justo debajo del header */
    left: 0;
    width: 100%;
    color: #5b2d3b;
    padding: 8px 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    background: rgba(255, 240, 246, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#stickyHeaderBar_GeneralConfig.st_1 {
    background: rgba(255, 240, 246, 0.7);
}

#stickyHeaderBar_GeneralConfig.st_2 {
    background: rgba(255, 234, 244, 0.75);
}

#stickyHeaderBar_GeneralConfig.st_3 {
    background: rgba(255, 226, 238, 0.8);
}

#stickyHeaderBar_GeneralConfig.visible {
    transform: translateY(0);
}

#stickyHeaderBar_GeneralConfig .sticky-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.9);
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    text-transform: none;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}

#stickyHeaderBar_GeneralConfig .sticky-action--kebab {
    padding: 10px;
    min-width: 44px;
    justify-content: center;
}

#stickyHeaderBar_GeneralConfig .sticky-action--icon {
    padding: 10px;
    min-width: 44px;
    justify-content: center;
}

#stickyHeaderBar_GeneralConfig .sticky-action i {
    color: inherit;
}

#stickyHeaderBar_GeneralConfig .sticky-action-spacer {
    flex: 1 1 auto;
}

#stickyHeaderBar_GeneralConfig .sticky-history-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#stickyHeaderBar_GeneralConfig .sticky-action--history {
    padding: 8px;
    min-width: 38px;
    min-height: 38px;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
}

#stickyHeaderBar_GeneralConfig .sticky-action--primary {
    background: linear-gradient(180deg, #f7a6c8 0%, #ec7fae 100%);
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(236, 127, 174, 0.35);
}

#stickyHeaderBar_GeneralConfig .sticky-action--secondary {
    background: rgba(255, 255, 255, 0.85);
    color: #6a3a4d;
}

#stickyHeaderBar_GeneralConfig .sticky-action--tertiary {
    background: rgba(255, 255, 255, 0.75);
    color: #6a3a4d;
}

#stickyHeaderBar_GeneralConfig .sticky-action:hover,
#stickyHeaderBar_GeneralConfig .sticky-action:active {
    transform: scale(0.98);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 6px 12px rgba(0, 0, 0, 0.12);
}

#stickyHeaderBar_GeneralConfig .sticky-action:active {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.18);
}

#stickyHeaderBar_GeneralConfig .sticky-action.is-active {
    background: linear-gradient(180deg, #f59dc1 0%, #ea74a5 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(234, 116, 165, 0.35);
}

#stickyHeaderBar_GeneralConfig #stickyHeaderMore_btn.is-active {
    background: #ea4f93;
    color: #ffffff;
    border-color: #ea4f93;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 16px rgba(234, 79, 147, 0.35);
}

#stickyHeaderBar_GeneralConfig .sticky-action:disabled,
#stickyHeaderBar_GeneralConfig .sticky-action.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

#stickyHeaderBar_GeneralConfig .sticky-action--history.is-disabled {
    pointer-events: auto;
    cursor: not-allowed;
}

#UndoinvitationActionToolbar.is-disabled,
#RedoinvitationActionToolbar.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

@media (max-width: 560px) {
    #stickyHeaderBar_GeneralConfig {
        gap: 8px;
        padding: 7px 6px;
    }

    #stickyHeaderBar_GeneralConfig .sticky-action {
        min-height: 40px;
        padding: 8px 12px;
        gap: 6px;
        font-size: 12px;
    }

    #stickyHeaderBar_GeneralConfig .sticky-action--kebab {
        padding: 8px;
        min-width: 40px;
    }
}

@media (max-width: 430px) {
    #stickyHeaderBar_GeneralConfig .sticky-action--secondary .sticky-action-label {
        display: none;
    }

    #stickyHeaderBar_GeneralConfig .sticky-action--secondary {
        padding-left: 10px;
        padding-right: 10px;
        min-width: 40px;
        justify-content: center;
    }

    #stickyHeaderBar_GeneralConfig .sticky-action--primary {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 360px) {
    #stickyHeaderBar_GeneralConfig .sticky-action--primary .sticky-action-label {
        font-size: 11px;
    }

    #stickyHeaderBar_GeneralConfig .sticky-history-actions {
        gap: 4px;
    }
}


.floating-sticky-menu {
    position: fixed;
    z-index: 10000;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 6px;
}

.floating-sticky-menu .menu-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    color: #111;
}

.floating-sticky-menu .menu-item:hover {
    background: #f3f4f6;
}

#clr-picker { z-index: 9999 !important; } 

#GeneralTitleTextColorPicker_inputSection .clr-field, 
#GeneralParagaphTextColorPicker_inputSection .clr-field, 
#GeneralBackgroundColorPicker_inputSection .clr-field{
    margin-left: -10px;
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el texto y el input */
}

.custom-label { font-weight: bold; color: #333; }

.ColorPicker_input {
    width: 40px;
    height: 40px;
    border: none;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    opacity: 0;
}

.colorPickerInput_container{ margin-left: -19px; margin-top: 0px !important; }
.colorConfig_SVG_container{ min-height: 64px; height: auto; }

.useImageOption_Container .theme_selectContainer .control-label,
.useImageOption_Container .color_selectContainer .control-label {
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    top: 0 !important;
    display: block !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #8b909b !important;
}

.useImageOption_Container .theme_selectContainer .form-group-material,
.useImageOption_Container .color_selectContainer .form-group-material {
    margin-bottom: 0 !important;
}

.useImageOption_Container .theme_selectContainer .select2-container,
.useImageOption_Container .color_selectContainer .select2-container {
    display: block;
    margin-top: 0;
}

/* Evita que los tabs superiores intercepten los clicks de Tema/Color */
.useImageOption_Container .mapImageType_container {
    position: relative;
    z-index: 1;
}

.useImageOption_Container .theme_selectContainer,
.useImageOption_Container .color_selectContainer {
    position: relative;
    z-index: 6;
    pointer-events: auto !important;
}

.useImageOption_Container .theme_selectContainer .form-group-material,
.useImageOption_Container .color_selectContainer .form-group-material,
.useImageOption_Container .theme_selectContainer .select2-container,
.useImageOption_Container .color_selectContainer .select2-container,
.useImageOption_Container .theme_selectContainer .select2-selection,
.useImageOption_Container .color_selectContainer .select2-selection {
    position: relative;
    z-index: 7;
    pointer-events: auto !important;
}

.ColorPicker_container{
    /*background-color: #6ccf6c;
    border-radius: 20px; 
    padding-bottom: 20px;*/
    padding-bottom: 0px;
}

.representativeStageIcon{
    border: 1px dashed black;
    border-radius: 50%;
    width: 40px;
}

/* /////////////////////////////////////////////////// */

.btnRemoveTimelineStage .remove-icon {
    font-size: 18px;
    color: #fc5151;
    cursor: pointer;
    margin-right: 5px;
}
.btnRemoveTimelineStage .remove-icon:hover { color: red; }

/* Timeline designer: mantener iconos y titulo del hito en una sola linea */
#timeline_designer .timelineStageItem .TimelineStage_legend {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

#timeline_designer .timelineStageItem .TimelineStage_legend > a {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

#timeline_designer .timelineStageItem .TimelineStage_legend > a.fw-bolder {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

#timeline_designer .timelineStageItem .TimelineStage_legend > a.fw-bolder .guest_legendTitle {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

#timeline_designer .timelineStageItem .TimelineStage_legend .btnRemoveTimelineStage,
#timeline_designer .timelineStageItem .TimelineStage_legend .control-arrow {
    flex: 0 0 auto;
}

#timeline_designer .timelineStageItem .TimelineStage_legend .control-arrow {
    margin-left: auto;
}

.nav-tabs-custom {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}

.nav-tabs { display: flex; width: 100%; border-radius: 30px; }

.nav-tabs > li { flex: 1; text-align: center; }

.nav-tabs > li > a {
    display: block;
    padding: 10px;
    border: none;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
    background-color: transparent;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

/* Fondo para la pestaña activa */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background-color: #f3c4c4 !important;
    color: #000;
    border-radius: 20px;
}

/* Hover */
.nav-tabs > li > a:hover {
    color: #000;
    border-bottom: none;
    background-color: #e0e0e0;
    border-radius: 20px;
}

.tab-content { margin-top: 20px; }

#itemsViewModeSection i.active{ color: var(--main-primary-color); }
#itemsViewModeSection i:hover{ color: var(--main-primary-color); }

.selectionItemSection_custom1 label {
    padding: 12px 30px;
    width: 100%;
    display: block;
    text-align: left;
    color: #3C454C;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;
    font-weight: bolder;
}
.selectionItemSection_custom1 label:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: '';
    background-color: var(--main-tertiary-color);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 0;
    z-index: -1;
}
.selectionItemSection_custom1 label:after {
    width: 32px;
    height: 32px;
    content: "";
    border: 2px solid #d1d7dc;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: 2px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 200ms ease-in;
}
.selectionItemSection_custom1 input:checked ~ label { color: #fff; font-weight: bolder; }
.selectionItemSection_custom1 input:checked ~ label:before {
    transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
}
.selectionItemSection_custom1 input:checked ~ label:after {
    background-color: var(--yellow-color); 
    border-color: var(--yellow-color);
}
.selectionItemSection_custom1 input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}

.floating-image {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
    border: 2px solid pink;
    padding: 5px;
    background-color: white;
}
.floating-image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* //////////////////////////////////////////////////////////////// */

.floating-price-circle{
    position: absolute;
    top: -20px;
    width: 50px;
    height: 50px;
    background-color: pink;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}
.floating-price-circle.right{ left: 87%; }
.floating-price-circle.left{ right: 87%; }

.floating-price-tag {
    z-index: 1;
    position: absolute;
    top: -10px; 
    left: -20px;
    width: 100px;
    height: 100px
}

.actualPrice {
    z-index: 2;
    position: absolute;
    top: 20px;
    left: 10px;
    font-size: 24px;
    margin-left: 5px;
}

.oldPrice {
    z-index: 2;
    position: absolute;
    color: #95919191;
    text-decoration: line-through;
    font-size: 14px;
    text-decoration-color: #ee3939;
    margin-left: 5px;
    top: 46px;
    left: 24px;
}

.tag-hole {
    position: relative;
    width: 12px;
    height: 12px;
    background-color: white;
    border: 2px solid black;
    border-radius: 50%;
    z-index: 2;
}

.service-block{
    border-bottom: 2px solid #cbb4c0;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.serviceList_container p{ text-align: left; font-size: 12px !important; }
.servicePlanItem .panel-body p{ text-align: left; }

.love-heart { margin-top:20px }
.love input[type="checkbox"] { display: none; }

.btnViewTemplateDetail, .btnSelectTemplate { width: 40px; }

/* Contenedor de la barra de herramientas */
#InvitationToolbar {
    position: fixed;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 6px;
    background-color: #fff;
    padding: 10px;
    border-radius: 100px;
    box-shadow: 0 4px 6px rgb(0 0 0 / 70%);
    border: 2px solid #a8658d;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    /*white-space: nowrap; */
    z-index: 200200 !important;
    text-align: center;
    touch-action: none;
    pointer-events: auto !important;
}
#InvitationToolbar * {
    pointer-events: auto !important;
}
#InvitationToolbar .select2-container {
    z-index: 200210 !important;
}
#InvitationToolbar .dropdown-menu,
#ImageToolbar_MoreOptions {
    z-index: 200220 !important;
}
.select2-container--open {
    z-index: 200230 !important;
}
.select2-container--open .select2-dropdown {
    z-index: 200230 !important;
}
#InvitationImageToolbar_inputs{ padding-left: 0px; padding-right: 0px; }

#InvitationToolbar.top_position{ top:108px !important}
#InvitationToolbar.bottom_position{ bottom:0px !important}

/* Popups/modales SIEMPRE por encima de #InvitationToolbar */
.basic_modal_st_1,
.custom_modal,
.custom_modal_v1,
.custom_modal_v2 {
    z-index: 210300 !important;
}

.modal-backdrop,
.modal-backdrop.in {
    z-index: 210300 !important;
}

.modal,
.modal.in {
    z-index: 210310 !important;
}

.custom_modal .popup-content,
.basic_modal_st_1 .popup-content,
.modal .popup-content {
    position: relative;
    z-index: 210320 !important;
}

.custom_modal .dropdown-menu,
.custom_modal .select2-container--open,
.custom_modal .select2-container--open .select2-dropdown,
.modal .dropdown-menu,
.modal .select2-container--open,
.modal .select2-container--open .select2-dropdown {
    z-index: 210330 !important;
}

#clr-picker {
    z-index: 210340 !important;
}

.toolbar p { margin-bottom: 0px !important; }

/* Estilo de cada item de la toolbar */
.toolbar-item {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
}
.toolbar-item img { width: 24px; height: 24px; }
.toolbar-item p { font-size: 12px; margin-top: 5px; color: #333; }

#ImageToolbar_MoreOptions {
    min-width: 220px;
}

#ImageToolbar_MoreOptions .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

#ImageToolbar_MoreOptions .other_options_Tooolbar-item_icon,
#ImageToolbar_MoreOptions .dropdown-item i {
    width: 18px;
    min-width: 18px;
    text-align: center;
}

#ImageToolbar_MoreOptions .image-layers-submenu {
    position: relative;
}

#ImageToolbar_MoreOptions .image-layers-submenu > a:after {
    display: none;
}

#ImageToolbar_MoreOptions .image-layers-caret {
    margin-left: auto;
    font-size: 11px;
    color: #8a8a8a;
}

#ImageToolbar_MoreOptions .image-layers-menu {
    display: none;
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: 6px;
    min-width: 220px;
}

#ImageToolbar_MoreOptions .image-layers-menu.show {
    display: block;
}

@media (max-width: 768px) {
    #ImageToolbar_MoreOptions .image-layers-menu {
        position: relative;
        left: 0;
        top: 0;
        margin-left: 0;
        margin-top: 4px;
        min-width: 100%;
        box-shadow: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
}

/* Más opciones */
.more-options-list {
    display: inline-block;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    white-space: nowrap;
}
.more-options { position: relative; }

.control-label.for_editableItem{ display: none !important;}

.management-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 20px;
    background-color: #ffdee4;
}
.management-bar .section-name { font-weight: bold; }
.management-bar button { margin-left: 10px; cursor: pointer; }
.management-bar .bo-section-name-editable{
    display: inline-block;
    min-width: 160px;
    border-bottom: 1px dashed rgba(238, 51, 82, 0.45);
    padding: 2px 6px;
    outline: none;
}
.management-bar .bo-section-name-editable:focus{
    border-bottom-color: rgba(238, 51, 82, 0.85);
    box-shadow: inset 0 -1px 0 rgba(238, 51, 82, 0.35);
}

#template-content .management-bar img{ 
    width: 34px;
    height: 34px;
    padding: 0px;
    border-radius: 20px;
    border: none;
    display: none;
}
#template-content .management-bar .actionButton, .moveHTMLItemButton{ 
    border: 2px solid #fbbdf4;
    border-radius: 20px;
    margin-left: 10px;
    font-size: 20px;
    padding-left: 6px;
    padding-right: 6px;
    color: #7f7f7f;
}

/* Envelope editor panel (solo modo diseno) */
#invitation-preview #PersonalEnvelope_section {
    --bo-envelope-overlay-opacity: 0.50;
    --bo-envelope-overlay-blur: 0px;
    --bo-envelope-bg-size-custom: cover;
    --bo-envelope-heart-size: 30px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;
    min-height: 100vh;
    height: auto;
    padding-top: 14px;
    padding-bottom: 20px;
}

#invitation-preview #PersonalEnvelope_section {
    background-size: var(--bo-envelope-bg-size-custom, cover) !important;
}

#invitation-preview #PersonalEnvelope_section::before {
    background-color: rgba(0, 0, 0, var(--bo-envelope-overlay-opacity, 0.5)) !important;
    backdrop-filter: blur(var(--bo-envelope-overlay-blur, 0px));
    -webkit-backdrop-filter: blur(var(--bo-envelope-overlay-blur, 0px));
}

#invitation-preview #PersonalEnvelope_section #Envelope-wrapper .heart {
    width: var(--bo-envelope-heart-size, 30px) !important;
    height: var(--bo-envelope-heart-size, 30px) !important;
}

#invitation-preview #PersonalEnvelope_section #Envelope-wrapper .heart:before,
#invitation-preview #PersonalEnvelope_section #Envelope-wrapper .heart:after {
    width: var(--bo-envelope-heart-size, 30px) !important;
    height: var(--bo-envelope-heart-size, 30px) !important;
}

#invitation-preview #PersonalEnvelope_section #Envelope-wrapper .heart:before {
    top: calc(var(--bo-envelope-heart-size, 30px) * -0.5) !important;
}

#invitation-preview #PersonalEnvelope_section #Envelope-wrapper .heart:after {
    left: calc(var(--bo-envelope-heart-size, 30px) * 0.5) !important;
}

#invitation-preview #PersonalEnvelope_section.bo-envelope-texture-dots #Envelope-wrapper {
    background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1.4px);
    background-size: 8px 8px;
}

#invitation-preview #PersonalEnvelope_section.bo-envelope-texture-lines #Envelope-wrapper {
    background-image: repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.2) 0px,
      rgba(255, 255, 255, 0.2) 6px,
      rgba(255, 255, 255, 0.02) 6px,
      rgba(255, 255, 255, 0.02) 12px
    );
}

#invitation-preview #PersonalEnvelope_section #Envelope-wrapper.bo-envelope-flap-flat .envelope::before {
    border-top-width: 110px !important;
}

#invitation-preview #PersonalEnvelope_section #Envelope-wrapper.bo-envelope-flap-sharp .envelope::before {
    border-top-width: 150px !important;
}

#invitation-preview #PersonalEnvelope_section #Envelope-wrapper.bo-envelope-flap-rounded .envelope::before {
    transform: scaleY(0.92) !important;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.08));
}

#invitation-preview #PersonalEnvelope_section.bo-envelope-font-cursive .solapa-text,
#invitation-preview #PersonalEnvelope_section.bo-envelope-font-cursive .base-text {
    font-family: "Dancing Script", cursive !important;
    font-size: 24px !important;
}

#invitation-preview #PersonalEnvelope_section.bo-envelope-font-elegant .solapa-text,
#invitation-preview #PersonalEnvelope_section.bo-envelope-font-elegant .base-text {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-config-panel {
    position: relative;
    z-index: 15;
    width: min(96vw, 560px);
    margin: 12px auto 8px auto;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(32, 44, 66, 0.12);
    background: #f5f7fb;
    box-shadow: 0 10px 24px rgba(18, 30, 52, 0.14);
    max-height: clamp(320px, 64vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 197, 230, 0.45) transparent;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-config-panel::-webkit-scrollbar {
    width: 8px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-config-panel::-webkit-scrollbar-thumb {
    background: rgba(16, 197, 230, 0.42);
    border-radius: 999px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-preview-card {
    border: 1px solid rgba(32, 44, 66, 0.12);
    border-radius: 14px;
    padding: 10px;
    background: #ffffff;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-preview-frame {
    height: 168px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.12);
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-preview-frame .bo-envelope-preview-dot {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(32, 44, 66, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00b8d9;
    font-size: 20px;
    margin: 0 auto;
    margin-top: 38px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-preview-caption {
    margin-top: 14px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-preview-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 0;
    background: #10c5e6;
    color: #053a45;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(16, 197, 230, 0.35);
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-preview-meta {
    margin-top: 8px;
    color: #27344b;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-preview-meta h5 {
    margin: 4px 0 2px 0;
    font-weight: 800;
    font-size: 19px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-preview-meta p {
    margin: 0;
    color: #6d7a91;
    font-size: 14px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    border-bottom: 1px solid rgba(34, 50, 74, 0.16);
    margin-top: 12px;
    padding: 5px;
    background: #e9eef5;
    border-radius: 12px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-tab {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5f6f87;
    font-weight: 700;
    padding: 8px 10px;
    font-size: 15px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-tab.active {
    background: #ffffff;
    color: #00adc9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(16, 197, 230, 0.35);
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-tabpanel {
    display: none;
    margin-top: 10px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-tabpanel.active {
    display: block;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-card {
    border: 1px solid rgba(34, 50, 74, 0.10);
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
    background: #f8fafd;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-card-title {
    font-weight: 800;
    color: #1c2e4a;
    margin-bottom: 10px;
    font-size: 19px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#invitation-preview #PersonalEnvelope_section .bo-env-color-chip {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(32, 44, 66, 0.14);
    cursor: pointer;
}

#invitation-preview #PersonalEnvelope_section .bo-env-color-chip.active {
    box-shadow: 0 0 0 2px rgba(16, 197, 230, 0.95), 0 0 0 4px rgba(16, 197, 230, 0.20);
    transform: scale(1.03);
}

#invitation-preview #PersonalEnvelope_section .bo-env-inline-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#invitation-preview #PersonalEnvelope_section .bo-env-inline-grid label,
#invitation-preview #PersonalEnvelope_section .bo-envelope-slider-row label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: #5a6880;
    font-weight: 700;
}

#invitation-preview #PersonalEnvelope_section .bo-env-inline-grid input[type="color"] {
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(31, 44, 69, 0.18);
    border-radius: 8px;
    padding: 3px;
    background: #fff;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-segmented button {
    border: 1px solid rgba(27, 39, 62, 0.16);
    background: #f4f6fa;
    color: #596881;
    border-radius: 10px;
    min-height: 42px;
    font-weight: 700;
    font-size: 14px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-segmented button.active {
    background: #ebfbff;
    color: #00adc9;
    border-color: rgba(16, 197, 230, 0.55);
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-slider-row {
    margin-bottom: 12px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-slider-row .bo-env-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-slider-row input[type="range"] {
    width: 100%;
    accent-color: #10c5e6;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-slider-row input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    background: #d7deea;
    border-radius: 999px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-slider-row input[type="range"]::-webkit-slider-thumb {
    margin-top: -5px;
    box-shadow: 0 0 0 4px rgba(16, 197, 230, 0.22);
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-content-input,
#invitation-preview #PersonalEnvelope_section .bo-envelope-content-textarea {
    width: 100%;
    border: 1px solid rgba(29, 44, 67, 0.14);
    border-radius: 10px;
    background: #fff;
    color: #2a3850;
    padding: 10px 11px;
    font-size: 15px;
}

#invitation-preview #PersonalEnvelope_section .bo-envelope-content-textarea {
    min-height: 86px;
    resize: vertical;
}

#invitation-preview.bo-runtime-read #PersonalEnvelope_section .bo-envelope-config-panel {
    display: none !important;
}

@media (max-width: 767px) {
    #invitation-preview #PersonalEnvelope_section .bo-envelope-config-panel {
        width: calc(100vw - 14px);
        border-radius: 16px;
        padding: 8px;
        margin-top: 8px;
        max-height: clamp(300px, 58vh, 540px);
    }

    #invitation-preview #PersonalEnvelope_section .bo-envelope-preview-frame {
        height: 156px;
    }

    #invitation-preview #PersonalEnvelope_section .bo-envelope-tabs {
        gap: 4px;
        padding: 4px;
    }

    #invitation-preview #PersonalEnvelope_section .bo-envelope-tab {
        padding: 8px 4px;
        font-size: 12px;
        white-space: nowrap;
    }

    #invitation-preview #PersonalEnvelope_section .bo-envelope-card-title {
        font-size: 16px;
    }

    #invitation-preview #PersonalEnvelope_section .bo-env-color-chip {
        width: 36px;
        height: 36px;
    }
}

.payment-methods { margin-bottom: 16px; }
.payment-option {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
}
.payment-option.selected{
    border-color: #ef8e9f;
    font-weight: bolder;
    background-color: #ffe0e5;
}
.payment-option img { width: 30px; height: auto; margin-bottom: 5px; }

/* Card Preview Styling */
.card-preview {
    text-align: left;
    background: linear-gradient(135deg, #ff85b8, #ffbedf);
    width: 320px;
    height: 180px;
    border-radius: 15px;
    padding: 20px;
    color: white;
    font-family: 'Arial', sans-serif;
    position: relative;
    margin: 0 auto 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.card-header { display: flex; justify-content: space-between; font-weight: bold; margin-top: 4px; }
.mastercard-icon, .card-chip img { width: 40px; height: auto; }
.card-chip img{ margin-top: -6px; }
.mastercard-icon{ margin-top: -14px;}
.card-number { font-size: 15px; letter-spacing: 2px; padding-top: 10px; }
.card-expiry { display: flex; margin-top: 10px; }
.card-holder-info { display: flex; justify-content: space-between; }

/* Input Styles */
#card-details input {
    width: 100%;
    margin: 8px 0;
    padding: 10px;
    border-radius: 5px;
    font-size: 1em;
}

#BankCard-preview{ text-align: left !important; margin-bottom: 20px; }
#BankCard-preview .brand-name{ font-size: 16px; font-weight: bolder; margin-top: -12px; padding-bottom: 10px; }
#Contactless-icon{ width: 30px; height: 30px; margin-top: -10px; }

.input-icon-wrapper { position: relative; display: flex; align-items: center; }

#UserBankCard_form label{ margin-bottom: 0px; margin-top: 0px; }
#UserBankCard_form label.control-label.animate{ display: none; }
#UserBankCard_form label.control-label.animate.is-visible{ display: inherit; }
#UserBankCard_form .form-group{ margin-bottom: 0px !important; }

#invitation-preview .unactiveInvitationSection{
    height: 40px;
    opacity: 0.5;
    overflow: hidden;
}

#invitation-preview .management-bar-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

#invitation-preview .editableItem.selectedContent,
#invitation-preview .editableItem.selectedContent:focus,
#invitation-preview .editableItem.selectedContent[contenteditable="true"]:focus,
#invitation-preview .editableItem.selectedContent:focus-visible {
    outline: none !important;
    border: 2px solid pink !important;
    box-shadow: 0 0 5px rgba(245, 104, 182, 0.5) !important;
}

/* Evita borde/outline nativo negro al perder seleccion en contenteditable */
#invitation-preview [contenteditable="true"]:focus:not(.selectedContent),
#template-content [contenteditable="true"]:focus:not(.selectedContent),
#invitation-preview .editableText:focus:not(.selectedContent),
#template-content .editableText:focus:not(.selectedContent) {
    outline: none !important;
    box-shadow: none !important;
}

/* En bloques con imagen de fondo evitamos que el borde cambie el ancho visual */
#invitation-preview .editableBackgroundImage.selectedContent,
#invitation-preview .editableBackgroundImage.selectedContent:focus,
#invitation-preview .editableBackgroundImage.selectedContent:focus-visible {
    border: 0 !important;
    outline: 2px solid pink !important;
    outline-offset: -2px !important;
    box-sizing: border-box !important;
    max-width: none !important;
}

/* Vista previa runtime dentro del editor: aspecto publicado (sin señales de edición). */
#invitation-preview.bo-runtime-read .editableItem,
#invitation-preview.bo-runtime-read .editableItem * {
    cursor: default !important;
}

#invitation-preview.bo-runtime-read .editableItem.selectedContent,
#invitation-preview.bo-runtime-read .editableItem.selectedContent:focus,
#invitation-preview.bo-runtime-read .editableItem.selectedContent:focus-visible,
#invitation-preview.bo-runtime-read .editableBackgroundImage.selectedContent,
#invitation-preview.bo-runtime-read .editableBackgroundImage.selectedContent:focus,
#invitation-preview.bo-runtime-read .editableBackgroundImage.selectedContent:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* En modo edicion del gestor no mostramos el footer propio de la invitacion. */
#invitation-preview:not(.bo-runtime-read) #template-content footer {
    display: none !important;
}

#invitation-preview.bo-runtime-read img.editableItem,
#invitation-preview.bo-runtime-read svg.editableItem,
#invitation-preview.bo-runtime-read .section-separator.editableItem,
#invitation-preview.bo-runtime-read .editableBackgroundImage.editableItem,
#invitation-preview.bo-runtime-read p.editableItem,
#invitation-preview.bo-runtime-read h1.editableItem,
#invitation-preview.bo-runtime-read h2.editableItem,
#invitation-preview.bo-runtime-read h3.editableItem,
#invitation-preview.bo-runtime-read h4.editableItem,
#invitation-preview.bo-runtime-read h5.editableItem,
#invitation-preview.bo-runtime-read h6.editableItem {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* RSVP editor helpers (solo modo diseno) */
#invitation-preview:not(.bo-runtime-read) #OpenAttendanceForm_editorTools {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    position: static;
    z-index: 12;
    background: rgba(255, 255, 255, 0.92);
    border: 1px dashed rgba(237, 119, 204, 0.45);
    border-radius: 999px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    backdrop-filter: blur(2px);
}

#invitation-preview:not(.bo-runtime-read) #AttendanceConfirmationForm_section.bo-attendance-config-active {
    border: 1px dashed rgba(237, 119, 204, 0.55);
    border-radius: 14px;
    background: rgba(255, 240, 247, 0.45);
    padding: 10px 10px 16px;
}

#invitation-preview:not(.bo-runtime-read) #AttendanceConfirmation.bo-attendance-config-active .bo-attendance-field-active {
    border-radius: 10px;
    outline: 2px solid rgba(237, 119, 204, 0.35);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(237, 119, 204, 0.08);
}

#invitation-preview:not(.bo-runtime-read) #AttendanceFieldConfigPanel {
    display: none !important;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-config > .form-group {
    display: none !important;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-config .guestAllergyTagsActions {
    display: none !important;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-config > :not(.bo-attendance-inline-field-card) {
    display: none !important;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-config.bo-attendance-field-hidden-preview .bo-attendance-field-summary-card {
    opacity: 1;
    background: #eef1f5;
    border-color: #cfd6e2;
    box-shadow: 0 2px 8px rgba(88, 101, 123, 0.10);
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-config.bo-attendance-field-hidden-preview .bo-attendance-field-summary-name,
#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-config.bo-attendance-field-hidden-preview .bo-attendance-field-summary-type {
    color: #7d8798;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-field-card {
    margin-top: 2px;
    margin-bottom: 10px;
    width: 100%;
    display: block;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-field-card[draggable="true"] {
    cursor: grab;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-field-card:focus-visible .bo-attendance-field-summary-card {
    outline: 2px solid rgba(237, 119, 204, 0.85);
    outline-offset: 2px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-field-card.is-dragging {
    opacity: .72;
}

.bo-attendance-drag-ghost {
    position: fixed;
    z-index: 100080;
    pointer-events: none;
    transform: translate3d(-9999px, -9999px, 0);
    opacity: .98;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .28));
}

.bo-attendance-drag-ghost .bo-attendance-field-summary-card {
    border: 2px solid rgba(237, 119, 204, .95) !important;
    background: linear-gradient(180deg, rgba(255, 247, 252, .98) 0%, rgba(255, 235, 246, .98) 100%) !important;
    box-shadow: 0 14px 28px rgba(237, 119, 204, .28) !important;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-config.bo-attendance-swap-target .bo-attendance-field-summary-card,
#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-field-card.bo-attendance-swap-target-card .bo-attendance-field-summary-card {
    border-color: rgba(237, 119, 204, .92);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 221, 239, .82) 0px,
        rgba(255, 221, 239, .82) 8px,
        rgba(255, 248, 252, .92) 8px,
        rgba(255, 248, 252, .92) 16px
    );
    box-shadow: 0 8px 18px rgba(237, 119, 204, .2);
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-field-card.is-selected .bo-attendance-field-summary-card,
#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-config.bo-attendance-inline-active .bo-attendance-field-summary-card {
    border-color: rgba(237, 119, 204, 0.72);
    box-shadow: 0 6px 14px rgba(237, 119, 204, 0.14);
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-card {
    border: 1px solid #d8deea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(77, 99, 129, 0.08);
    padding: 10px 24px 11px 12px;
    position: relative;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-meta {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    margin-right: 6px;
    color: #9eabc0;
    cursor: grab;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-config.bo-attendance-dragging-group .bo-attendance-field-summary-card {
    border-style: dashed;
    border-color: rgba(237, 119, 204, 0.75);
    box-shadow: 0 8px 18px rgba(237, 119, 204, 0.18);
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-add-field-card {
    width: 100%;
    margin: 2px 0 12px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-drop-indicator {
    width: 100%;
    height: 12px;
    margin: 3px 0 8px;
    border-radius: 10px;
    border: 2px dashed rgba(237, 119, 204, 0.78);
    background: rgba(255, 214, 238, 0.35);
    box-shadow: 0 2px 6px rgba(237, 119, 204, 0.18);
    pointer-events: none;
    opacity: 0.95;
    transform: translateY(0);
    transition: transform .16s ease, opacity .16s ease;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-drop-indicator.is-active {
    animation: boAttendanceDropIndicatorPulse 260ms ease-out;
}

@keyframes boAttendanceDropIndicatorPulse {
    0% {
        opacity: 0;
        transform: translateY(-4px) scaleX(.985);
    }
    55% {
        opacity: 1;
        transform: translateY(0) scaleX(1);
    }
    100% {
        opacity: .95;
        transform: translateY(0) scaleX(1);
    }
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-add-field-btn {
    width: 100%;
    border: 2px dashed rgba(237, 119, 204, 0.55);
    border-radius: 14px;
    background: rgba(255, 245, 250, 0.7);
    color: #d4519f;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-add-field-btn i {
    font-size: 14px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-texts {
    min-width: 0;
    width: 100%;
    text-align: left;
    padding-left: 0;
    margin-left: 0;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-name {
    font-weight: 700;
    color: #18233a;
    font-size: 16px;
    line-height: 1.2;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-required-asterisk {
    color: #e54566;
    font-weight: 800;
    margin-left: 2px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-type {
    margin-top: 3px;
    color: #7b879d;
    font-size: 12px;
    line-height: 1.2;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-editBtn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(184, 196, 214, 0.65);
    background: #fff;
    color: #96a3bb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-row {
    margin-top: 11px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-resizeHandle {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 20px;
    height: 58px;
    border-radius: 12px;
    border: 1px solid rgba(237, 119, 204, 0.58);
    background: #fff;
    box-shadow: 0 4px 12px rgba(237, 119, 204, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    padding: 0;
    z-index: 2;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-resizeGrip {
    display: inline-block;
    width: 8px;
    height: 34px;
    border-radius: 6px;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(237, 119, 204, 0.92) 0px,
        rgba(237, 119, 204, 0.92) 3px,
        rgba(237, 119, 204, 0.14) 3px,
        rgba(237, 119, 204, 0.14) 6px
    );
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-inline-field-card.is-resizing .bo-attendance-field-summary-card {
    border-color: rgba(237, 119, 204, 0.9);
    box-shadow: 0 8px 18px rgba(237, 119, 204, 0.26);
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ed77cc;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-visibleState {
    font-size: 12px;
    font-weight: 700;
    min-width: 0;
    text-align: left;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-visibleWrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: auto;
    justify-content: flex-start;
    margin-right: 0;
    flex: 0 0 auto;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-visibleIcon {
    font-size: 13px;
    width: 14px;
    text-align: center;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-visibleState.is-visible {
    color: #ed77cc;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-visibleState.is-hidden {
    color: #9ea7bb;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-visibleWrap.is-visible {
    color: #ed77cc;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-summary-visibleWrap.is-hidden {
    color: #9ea7bb;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-switch {
    position: relative;
    width: 48px;
    height: 28px;
    margin: 0;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #f1d8e6;
    transition: all .2s ease;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-switch-slider:before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: all .2s ease;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-switch input:checked + .bo-attendance-switch-slider {
    background: #ed77cc;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-switch input:checked + .bo-attendance-switch-slider:before {
    transform: translateX(20px);
}

#AttendanceFieldAdvancedConfig_popup .popup-content {
    max-width: 640px;
    margin-top: 4vh !important;
}

#AttendanceFieldAdvancedConfig_popup .popup-header {
    justify-content: flex-start;
    padding: 12px 16px 8px;
    border-bottom: 1px solid rgba(237, 119, 204, 0.24);
}

#AttendanceFieldAdvancedConfig_popup .popup-header .titles_container {
    justify-content: flex-start;
}

#AttendanceFieldAdvancedConfig_popup .popup-header .titles-text {
    align-items: flex-start;
}

#AttendanceFieldAdvancedConfig_popup .popup-title {
    color: #593a48;
}

#AttendanceFieldAdvancedConfig_popup .popup-subtitle {
    color: #8b6b7a;
}

#AttendanceFieldAdvancedConfig_popup .popup-HTML_detail {
    padding: 10px 16px 16px;
}

#AttendanceFieldAdvancedConfig_popup .popup-footer {
    border-top: 1px solid rgba(237, 119, 204, 0.2);
    padding: 8px 10px 10px;
    margin: 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#AttendanceFieldAdvancedConfig_popup .popup-footer .col-lg-6,
#AttendanceFieldAdvancedConfig_popup .popup-footer .col-md-6,
#AttendanceFieldAdvancedConfig_popup .popup-footer .col-sm-6,
#AttendanceFieldAdvancedConfig_popup .popup-footer .col-xs-6 {
    padding-left: 6px;
    padding-right: 6px;
}

#AttendanceFieldAdvancedConfig_popup .popup-footer .accept_button,
#AttendanceFieldAdvancedConfig_popup .popup-footer .cancel_button {
    width: 100%;
    border-radius: 999px;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-card {
    border: 1px solid rgba(184, 196, 214, 0.45);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-item > span {
    font-size: 12px;
    color: #6f7f9d;
    font-weight: 600;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-options-item {
    grid-column: 1 / -1;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-options-editor {
    border: 1px solid rgba(184, 196, 214, 0.5);
    border-radius: 10px;
    padding: 8px;
    background: #fafbfd;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow: auto;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-option-row {
    display: grid;
    grid-template-columns: 18px 1fr 30px 30px 30px;
    gap: 6px;
    align-items: center;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-option-grip {
    color: #9aa7bf;
    font-size: 14px;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-option-row .btn {
    padding: 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    border: 1px solid #d8deea;
    background: #fff;
    color: #6f7f9d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-option-row .btn:disabled {
    opacity: .45;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-options-add {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-options-add .btn {
    border-radius: 10px;
    color: #fff;
    white-space: nowrap;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-option-empty {
    font-size: 12px;
    color: #8b97ac;
    padding: 6px 2px;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-options-note {
    margin-top: 8px;
    font-size: 12px;
    color: #8b97ac;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-select-options-editor.is-locked {
    background: #f4f6fa;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-item .select2-container {
    width: 100% !important;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-item .select2-selection--single {
    height: 38px;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-item .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 12px !important;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: #34415d;
    font-weight: 600;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    min-height: 32px;
    padding: 4px 0;
    font-size: 13px;
    color: #34415d;
    font-weight: 700;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-switch.bo-attendance-switch--modal {
    position: relative;
    width: 48px;
    height: 28px;
    margin: 0;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-switch.bo-attendance-switch--modal input {
    opacity: 0;
    width: 0;
    height: 0;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-switch.bo-attendance-switch--modal .bo-attendance-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #f1d8e6;
    transition: all .2s ease;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-switch.bo-attendance-switch--modal .bo-attendance-switch-slider:before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: all .2s ease;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-switch.bo-attendance-switch--modal input:checked + .bo-attendance-switch-slider {
    background: #ed77cc;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-switch.bo-attendance-switch--modal input:checked + .bo-attendance-switch-slider:before {
    transform: translateX(20px);
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-switch.bo-attendance-switch--modal input:disabled + .bo-attendance-switch-slider {
    background: #cfd6e2;
    cursor: not-allowed;
}

#AttendanceFieldAdvancedConfig_popup .bo-attendance-switch.bo-attendance-switch--modal input:disabled + .bo-attendance-switch-slider:before {
    background: #f7f9fc;
    box-shadow: none;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-config-card {
    border: 1px solid rgba(237, 119, 204, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 20px rgba(237, 119, 204, 0.12);
    padding: 12px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-config-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4a4a4a;
    font-weight: 700;
    font-size: 13px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-config-subtitle {
    margin-top: 4px;
    color: #ed77cc;
    font-size: 12px;
    font-weight: 600;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-config-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-config-item > span {
    font-size: 11px;
    color: #7c8799;
    font-weight: 600;
}

#invitation-preview:not(.bo-runtime-read) .bo-attendance-field-config-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: #4a4a4a;
    font-weight: 600;
}

.bo-add-section-control{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 20px 0 20px;
    pointer-events: auto;
}
.bo-add-section-control-line{
    flex: 1 1 auto;
    border-top: 2px dashed #ef9ec0;
    opacity: .95;
}
.bo-add-section-control-button{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 2px solid #ef9ec0;
    background: #fff;
    color: #ec3d77;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.bo-add-section-control-label{
    font-weight: 600;
    font-size: 13px;
    color: #914868;
    white-space: nowrap;
}

#invitation-preview:not(.bo-runtime-read) .symbol.editableItem {
    cursor: text;
    outline: 1px dashed rgba(236, 74, 149, 0.28);
    outline-offset: 2px;
    border-radius: 4px;
    padding-left: 2px;
    padding-right: 2px;
    min-width: 10px;
}

#invitation-preview:not(.bo-runtime-read) .symbol.editableItem:hover {
    outline-color: rgba(236, 74, 149, 0.5);
}

#invitation-preview:not(.bo-runtime-read) .short-line.editableItem {
    position: relative;
    cursor: pointer;
}

#invitation-preview:not(.bo-runtime-read) .short-line.editableItem::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: -8px;
    bottom: -8px;
    border-radius: 8px;
    outline: 1px dashed rgba(236, 74, 149, 0.22);
    pointer-events: none;
}

#AttendanceConfirmation .bo-attendance-inline-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #e64c84;
}

#AttendanceConfirmation .bo-attendance-inline-error.hide {
    display: none !important;
}

#AttendanceConfirmation input.error,
#AttendanceConfirmation textarea.error,
#AttendanceConfirmation select.error,
#AttendanceConfirmation .select2.error .select2-selection,
#AttendanceConfirmation .select2 .select2-selection.error {
    border-color: #e64c84 !important;
    box-shadow: 0 0 0 1px rgba(230, 76, 132, 0.22) !important;
}

@media (max-width: 768px) {
    #invitation-preview:not(.bo-runtime-read) .bo-attendance-field-config-grid {
        grid-template-columns: 1fr;
    }
    #AttendanceFieldAdvancedConfig_popup .bo-attendance-advanced-grid {
        grid-template-columns: 1fr;
    }
}

#FontFamily_selectContainer .selected, #TextAlign_inputSection .selected{
    background-color: #f2cfcf;
}

input[type="color"] {
    border-radius: 100px;
    border: 1px solid #ccc;
    width: 40px;
    height: 40px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.effect-sepia { filter: sepia(1); }
.effect-grayscale { filter: grayscale(1); }
.effect-brightness { filter: brightness(1.5); }
.effect-contrast { filter: contrast(2); }
.effect-invert { filter: invert(1); }
.effect-blur { filter: blur(5px); }

#invitation-preview [data-bo-motion],
#template-content [data-bo-motion] {
    will-change: transform;
    transform-origin: center center;
    --bo-motion-base-transform: translate(0px,0px) rotate(0deg) scale(1,1);
    --bo-motion-pulse: 1.06;
}

@keyframes boMotionFloat {
    0%, 100% { transform: var(--bo-motion-base-transform); }
    50% { transform: var(--bo-motion-base-transform) translateY(calc(var(--bo-motion-amplitude, 18px) * -1)); }
}

@keyframes boMotionDrift {
    0% { transform: var(--bo-motion-base-transform) translate(calc(var(--bo-motion-amplitude, 18px) * -0.35), 0); }
    50% { transform: var(--bo-motion-base-transform) translate(calc(var(--bo-motion-amplitude, 18px) * 0.35), calc(var(--bo-motion-amplitude, 18px) * -0.55)); }
    100% { transform: var(--bo-motion-base-transform) translate(calc(var(--bo-motion-amplitude, 18px) * -0.35), 0); }
}

@keyframes boMotionSway {
    0%, 100% { transform: var(--bo-motion-base-transform) translateX(calc(var(--bo-motion-amplitude, 18px) * -0.5)); }
    50% { transform: var(--bo-motion-base-transform) translateX(calc(var(--bo-motion-amplitude, 18px) * 0.5)); }
}

@keyframes boMotionPulse {
    0%, 100% { transform: var(--bo-motion-base-transform); }
    50% { transform: var(--bo-motion-base-transform) scale(var(--bo-motion-pulse, 1.06)); }
}

#ImageAnimationConfig_popup .popup-HTML_detail {
    max-height: min(58vh, 520px);
    overflow-y: auto;
}

#ImageAnimationConfig_popup .bo-motion-editor {
    display: grid;
    gap: 12px;
}

#ImageAnimationConfig_popup .bo-motion-previewCard {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255, 241, 248, 0.88), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(236, 74, 149, 0.24);
    border-radius: 14px;
    padding: 10px;
}

#ImageAnimationConfig_popup .bo-motion-preview-sample {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid rgba(236, 74, 149, 0.32);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ec4a95;
    font-size: 22px;
    --bo-motion-base-transform: translate(0px,0px) rotate(0deg) scale(1,1);
}

#ImageAnimationConfig_popup .bo-motion-preview-sample.is-idle {
    opacity: 0.9;
}

#ImageAnimationConfig_popup .bo-motion-previewTitle {
    font-size: 15px;
    font-weight: 700;
    color: #283347;
}

#ImageAnimationConfig_popup .bo-motion-previewHint {
    font-size: 12px;
    color: #7b879c;
}

#ImageAnimationConfig_popup .bo-motion-field {
    margin-bottom: 0;
}

#ImageAnimationConfig_popup .bo-motion-labelRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#ImageAnimationConfig_popup .bo-motion-inlineValue {
    font-size: 12px;
    font-weight: 700;
    color: #ec4a95;
}

#ImageAnimationConfig_popup .bo-motion-presetSegments {
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

#ImageAnimationConfig_popup .bo-motion-preset-btn {
    border: 1px solid rgba(172, 182, 198, 0.42);
    background: #fff;
    border-radius: 12px;
    padding: 8px 6px;
    min-height: 56px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #68758b;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.16s ease;
}

#ImageAnimationConfig_popup .bo-motion-preset-btn i {
    font-size: 14px;
}

#ImageAnimationConfig_popup .bo-motion-preset-btn.active {
    border-color: rgba(236, 74, 149, 0.78);
    background: linear-gradient(180deg, rgba(255, 232, 244, 0.95), rgba(255, 243, 249, 0.98));
    color: #be2f74;
    box-shadow: 0 3px 10px rgba(236, 74, 149, 0.18);
}

#ImageAnimationConfig_popup .bo-motion-preset-btn:hover {
    border-color: rgba(236, 74, 149, 0.5);
    color: #be2f74;
}

#ImageAnimationConfig_popup .bo-motion-range {
    margin-top: 6px;
}

#ImageMotionAmplitude_input {
    accent-color: #ec4a95;
}

#ImageAnimationConfig_popup .bo-motion-twoCols {
    margin-left: -6px;
    margin-right: -6px;
}

#ImageAnimationConfig_popup .bo-motion-twoCols > [class*='col-'] {
    padding-left: 6px;
    padding-right: 6px;
}

#ImageAnimationConfig_popup .bo-motion-toggleRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(172, 182, 198, 0.28);
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
}

#ImageAnimationConfig_popup .bo-motion-toggleLabel {
    font-size: 13px;
    font-weight: 600;
    color: #3a465a;
}

#ImageAnimationConfig_popup .bo-motion-heartEditor {
    border: 1px solid rgba(236, 74, 149, 0.22);
    background: linear-gradient(180deg, rgba(255, 242, 248, 0.72), rgba(255, 255, 255, 0.98));
    border-radius: 12px;
    padding: 10px;
}

#ImageAnimationConfig_popup .bo-motion-colorInput {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(172, 182, 198, 0.4);
    padding: 4px;
    background: #fff;
    cursor: pointer;
}

#ImageMotionHeartScale_input {
    accent-color: #ec4a95;
}

@media (max-width: 480px) {
    #ImageAnimationConfig_popup .bo-motion-presetSegments {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashedLine{
    position: absolute;
    top: 50%;
    width: 44%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #929191, #929191 5px, transparent 5px, transparent 10px);
    transform: translateY(-50%);
}
.dashedLine.left{  left: 0; width: 22%; }
.dashedLine.right{ right: 0; width: 21%; }

#ApplyCopyAndPaste.selected{
    background-color: #ffe1e6;
    border-radius: 6px;
}

#EventLocations_section .mapTypeSelector_text{
    font-size: 16px;
    font-weight: bolder;
    padding-top: 10px;
    padding-bottom: 10px;
}

.selectableImage .checkbox-label {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f6f6f6a3;
    border: 3px solid #ff0186;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    z-index: 1;
}
.swiper .checkbox-label .checkmark {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border-radius: 50%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.result_image_title_container{
    margin-bottom: 10px;
    border-bottom: 1px solid black;
    font-weight: bolder;
    text-align: center;
}

.labeledTextImage{
    position: absolute;
    left: 20%;
    top: 100%;
    display: inline-block;
    min-width: 60px;
    cursor: grab;
    margin-top: -40px;
    margin-left: 20px;
    background-color: #f1d2d2;
    padding: 6px;
    border-radius: 20px;
    font-size: 16px;
    padding-left: 14px;
    padding-right: 20px;
    word-break: break-word;
    white-space: nowrap;
    font-weight: bolder;
}
.labeledTextImage_text { display: inline-block; line-height: 1.5; }
.dragAndDropLabel { position: absolute; top: 0; right: 0; z-index: 1; cursor: pointer; }
.labeledTextImage:active { cursor: grabbing; }
.result_image_container img { user-select: none; pointer-events: none; }

.swiper .select-image-checkbox:checked + .checkbox-label .checkmark {
    background-color: #f62276;
    border: 3px solid #f62276;
}
.select-image-checkbox:checked + .checkbox-label .checkmark::after {
    content: '\2713';
    color: white;
    font-size: 22px;
}

/* Botón de gestión de contenidos */
.management_content_button{
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1;
}
.management_content_button.add_action{ background-color: #28a745; }
.management_content_button.delete_action{
    background-color: rgb(226, 27, 27);
    top: -16px; right: -14px; z-index: 10; position: absolute;
}
.management_content_button.return_action{
    position: absolute; background-color: rgb(67 228 59);
    top: -10px; right: -12px; z-index: 10;
}
.management_content_button.dragAndDropLabel{ position: absolute; top: -16px; right: -14px; }

.deleted{ opacity: 0.4; }
.clr-field button { border-radius: 50%; }

/* //////////////////////////////////// Maps ///////////////////////////////////  */

.mapTypeSelector .mapTypeSelectorOption{
    border: 2px solid #9f9f9f;
    text-align: center;
    padding-bottom: 6px;
    border-style: dashed;
}
.mapTypeSelector .mapTypeSelectorOption.selected{
     background-color: #fee6ea;
     font-weight: bolder;
}
.imageSourceSelectorOption.selected{
    background-color: #ffdbe1;
    padding-top: 6px;
    padding-bottom: 6px;
    border: #c9c9c9 2px solid;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bolder;
}

/* Base unificada para tabs de origen de imagen en todos los popups */
.mapImageType_container {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: #e2e2e6;
    border-radius: 12px;
    padding: 4px;
    margin: 4px 4px 10px;
    width: calc(100% - 8px);
    box-sizing: border-box;
}

.mapImageType_container .imageSourceSelectorOption,
.mapImageType_container .imageSourceSelectorOption.selected {
    flex: 1 1 0;
    float: none !important;
    margin: 0 !important;
    min-height: 40px;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    cursor: pointer;
    box-sizing: border-box;
}

.mapImageType_container .imageSourceSelectorOption {
    background: #f4f5f8;
    color: #858a97;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.mapImageType_container .imageSourceSelectorOption.selected {
    background: #f87eb7;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(19, 21, 26, .14);
}

.mapImageType_container .imageSourceSelectorOption > div {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    min-width: 0;
}

.mapImageType_container .imageSourceSelectorOption > div:first-child {
    width: 20px !important;
    justify-content: center !important;
}

.mapImageType_container .imageSourceSelectorOption > div:last-child {
    justify-content: center !important;
}

.mapImageType_container .imageSourceSelectorOption .bo-tab-label-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100% !important;
    min-width: 0;
}

.mapImageType_container .imageSourceSelectorOption .bo-tab-main-label,
.mapImageType_container .imageSourceSelectorOption .bo-tab-label-wrap > span {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mapImageType_container .imageSourceSelectorOption .bo-tab-icon-left {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
    border-radius: 0 !important;
    display: none;
}

.mapImageType_container .imageSourceSelectorOption .bo-tab-icon-left:not(.hide) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.mapImageType_container .imageSourceSelectorOption img.hide,
.mapImageType_container .imageSourceSelectorOption .bo-tab-icon-left.hide,
.mapImageType_container .imageSourceSelectorOption .bo-tab-icon-right {
    display: none !important;
}

/* Refuerzo visual por estado para evitar iconos duplicados */
.mapImageType_container .imageSourceSelectorOption.selected img.colored { display: inline-flex !important; }
.mapImageType_container .imageSourceSelectorOption.selected img.no_colored { display: none !important; }
.mapImageType_container .imageSourceSelectorOption:not(.selected) img.colored { display: none !important; }
.mapImageType_container .imageSourceSelectorOption:not(.selected) img.no_colored { display: inline-flex !important; }

.mapImageType_container .imageSourceSelectorOption .bo-tab-loading-indicator {
    display: none !important;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    max-width: 100%;
}

/* Solo mostrar "Cargando..." durante subida real del tab Upload activo */
[data-upload-processing="1"] .mapImageType_container .imageSourceSelectorOption.selected[data-image-source="UploadImage"] .bo-tab-main-label {
    display: none !important;
}
[data-upload-processing="1"] .mapImageType_container .imageSourceSelectorOption.selected[data-image-source="UploadImage"] .bo-tab-loading-indicator {
    display: inline-flex !important;
}

.imageListMode_container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.imageListMode_container .imageListZoom_container {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f2f2f4;
    border-radius: 999px;
    padding: 5px 8px;
    border: 1px solid #e5e6ea;
}

.imageListMode_container .imageListZoom_button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #dde0e7;
    background: #ffffff;
    color: #9ca2ae;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.imageListMode_container .imageListZoom_button:hover:not(:disabled) {
    background: #ff5f9f;
    color: #ffffff;
}

.imageListMode_container .imageListZoom_button:disabled {
    opacity: 1;
    border-color: #e8e9ee;
    background: #ececf0;
    color: #c0c3cc;
    cursor: not-allowed;
}

.imageListMode_container .imageListZoom_text {
    font-size: 12px;
    font-weight: 600;
    color: #838896;
    line-height: 1;
    padding: 0 2px;
}

.imageListMode_container .imageListModeSelector_group {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-self: center;
}

.imageListMode_container .imageOpacityToggle_button {
    grid-column: 3;
    justify-self: end;
    width: 40px;
    height: 40px;
    border: 1px solid #e4d6de;
    border-radius: 999px;
    background: #ffffff;
    color: #9297a2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.imageListMode_container .imageOpacityToggle_button i {
    font-size: 15px;
    line-height: 1;
}

.imageListMode_container .imageOpacityToggle_button.selected {
    color: #ff5f9f;
    border-color: #f7aacb;
    background: #fff5fa;
    box-shadow: 0 2px 8px rgba(33, 37, 43, 0.12);
}

.imageListMode_container .imageOpacityToggle_button:hover:not(.selected) {
    color: #7f8592;
    border-color: #d9dce4;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(33, 37, 43, 0.08);
}

.imageListMode_container .imageListModeSelectorOption {
    width: 54px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #afb3bd;
    background: #ececef;
    border: 1px solid #e4e4e8;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.imageListMode_container .imageListModeSelectorOption:first-child {
    border-radius: 999px 0 0 999px;
}

.imageListMode_container .imageListModeSelectorOption:last-child {
    border-radius: 0 999px 999px 0;
}

.imageListMode_container .imageListModeSelectorOption i {
    font-size: 15px;
    line-height: 1;
}

.imageListMode_container .imageListModeSelectorOption.selected {
    color: #ff6ca8;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 38, 47, 0.14);
}

.selectableImage.image-list-mode {
    --bo-list-item-min-width: 96px;
    --bo-list-thumb-height: 78px;
    --bo-list-item-min-height: 110px;
    padding-top: 8px !important;
    height: 44vh;
    min-height: 260px;
    max-height: 44vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.selectableImage.image-list-mode .swiper-wrapper {
    transform: none !important;
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--bo-list-item-min-width), 1fr));
    gap: 12px;
    align-content: start;
}

.irs{
    height: 35px !important;
}
.selectableImage.image-list-mode .swiper-slide {
    width: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border: 2px solid #f4e3ea;
    border-radius: 16px;
    background: #ffffff;
    position: relative;
    padding: 8px 8px 6px;
    min-height: calc(var(--bo-list-thumb-height) + 10px);
    height: auto;
    box-shadow: 0 3px 10px rgba(37, 41, 48, 0.08);
    opacity: 1 !important;
}

.selectableImage.image-list-mode .swiper-slide.selected {
    border-color: #ff7eb2;
    box-shadow: 0 4px 14px rgba(255, 126, 178, 0.28);
}

.selectableImage.image-list-mode .swiper-slide img,
.selectableImage.image-list-mode .swiper-slide svg,
.selectableImage.image-list-mode .swiper-slide .lazy-svg {
    width: 100%;
    height: var(--bo-list-thumb-height);
    margin: 0 auto;
    display: block;
    object-fit: contain;
}

.selectableImage.image-list-mode .checkbox-label {
    top: -10px;
    left: -9px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #f2a6c6;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 4;
    box-shadow: 0 1px 5px rgba(26, 30, 39, 0.2);
}

.selectableImage.image-list-mode .checkbox-label .checkmark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.selectableImage.image-list-mode .select-image-checkbox:checked + .checkbox-label .checkmark {
    background-color: #ff6ea9;
    border: 0;
}

.selectableImage.image-list-mode .select-image-checkbox:checked + .checkbox-label .checkmark::after {
    font-size: 14px;
    line-height: 22px;
    display: block;
    text-align: center;
}

.selectableImage.image-list-mode .swiper-button-next,
.selectableImage.image-list-mode .swiper-button-prev,
.selectableImage.image-list-mode .swiper-pagination,
.selectableImage.image-list-mode .swiper-scrollbar {
    display: none !important;
}

.useImageOption_Container .imageAdjustments_container {
    background: #ffffff;
    border-radius: 14px;
    padding: 6px 12px 4px;
    margin-top: 2px;
    border: 1px solid #c0c0c0;
    margin-bottom: 14px;
    margin-right: 4px;
    width: calc(100% - 8px);
    box-sizing: border-box;
    overflow: hidden;
}

.useImageOption_Container .imageAdjustments_container .opacity_editors_row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.useImageOption_Container .imageAdjustments_container .opacity_nonSvgColorEditors,
.useImageOption_Container .imageAdjustments_container .backgroundRenderModeEditors,
.useImageOption_Container .imageAdjustments_container .opacity_sliderSection {
    flex: 0 0 calc(50% - 4px);
    max-width: calc(50% - 4px);
    min-width: 0;
    box-sizing: border-box;
}

.useImageOption_Container .imageAdjustments_container .opacity_nonSvgColorEditors {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-top: 2px;
}

.useImageOption_Container .imageAdjustments_container .backgroundRenderModeEditors {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 1px;
    padding-right: 4px;
}

.useImageOption_Container .imageAdjustments_container .backgroundModeActions {
    display: flex;
    justify-content: flex-end;
}

.useImageOption_Container .imageAdjustments_container .backgroundModeReset_button {
    border: 1px solid #e4e7ef;
    background: #ffffff;
    color: #7a8394;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.useImageOption_Container .imageAdjustments_container .backgroundModeReset_button:hover {
    border-color: #ea4f93;
    color: #ea4f93;
    background: #fff7fb;
}

.useImageOption_Container .imageAdjustments_container .backgroundModeGroup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.useImageOption_Container .imageAdjustments_container .backgroundModeGroup_label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8b909b;
    min-width: 68px;
}

.useImageOption_Container .imageAdjustments_container .backgroundModeOptions {
    display: inline-flex;
    align-items: center;
    background: #f5f6fa;
    border: 1px solid #e1e4ec;
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}

.useImageOption_Container .imageAdjustments_container .backgroundModeOption {
    border: 0;
    background: transparent;
    color: #6f7684;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.useImageOption_Container .imageAdjustments_container .backgroundModeOption:hover {
    background: #ebeef6;
    color: #4f5767;
}

.useImageOption_Container .imageAdjustments_container .backgroundModeOption.selected {
    background: #ea4f93;
    color: #ffffff;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .opacity_editors_row {
    align-items: center;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .opacity_sliderSection {
    order: 1;
    flex: 0 0 34%;
    max-width: 34%;
    padding-right: 6px;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundRenderModeEditors {
    order: 2;
    flex: 0 0 66%;
    max-width: 66%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px 8px;
    padding-top: 0;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeGroup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeGroup_label {
    min-width: auto;
    font-size: 10px;
    letter-spacing: 0.35px;
    margin: 0;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeOptions {
    padding: 1px;
    gap: 1px;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeOption {
    font-size: 10px;
    padding: 4px 7px;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeActions {
    width: 100%;
}

@media (max-width: 768px) {
    .useImageOption_Container .imageAdjustments_container .backgroundModeGroup {
        flex-direction: column;
        align-items: flex-start;
    }

    .useImageOption_Container .imageAdjustments_container .backgroundModeGroup_label {
        min-width: 0;
    }

    .useImageOption_Container .imageAdjustments_container .backgroundModeOptions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    #generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .opacity_sliderSection {
        flex: 0 0 40%;
        max-width: 40%;
    }

    #generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundRenderModeEditors {
        flex: 0 0 60%;
        max-width: 60%;
        justify-content: flex-end;
    }

    #generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeGroup {
        flex-direction: row;
        align-items: center;
    }

    #generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeOptions {
        width: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
}

.useImageOption_Container .imageAdjustments_container .imageAdjustments_title {
    display: none;
}

.useImageOption_Container .imageAdjustments_container .imageAdjustments_header {
    display: none;
}

.useImageOption_Container .imageAdjustments_container .imageAdjustments_header_reset {
    display: none;
}

#generalBackgroundImageConfig_Stage_DataSection .imageListMode_container {
    grid-template-columns: minmax(132px, auto) 1fr auto;
    gap: 10px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#generalBackgroundImageConfig_Stage_DataSection .imageListMode_container .imageListZoom_container {
    background: #ffffff;
    border: 1px solid #e2e8f2;
    box-shadow: 0 1px 4px rgba(31, 48, 77, 0.07);
}

#generalBackgroundImageConfig_Stage_DataSection .imageListMode_container .imageListZoom_text {
    min-width: 68px;
    text-align: center;
    font-weight: 700;
    color: #8190a7;
}

#generalBackgroundImageConfig_Stage_DataSection .imageListMode_container .imageListModeSelector_group {
    background: #ecf1f8;
    border: 1px solid #dde4f0;
    border-radius: 14px;
    padding: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#generalBackgroundImageConfig_Stage_DataSection .imageListMode_container .imageListModeSelectorOption {
    width: 48px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: transparent;
}

#generalBackgroundImageConfig_Stage_DataSection .imageListMode_container .imageListModeSelectorOption.selected {
    background: #ffffff;
    color: #ea4f93;
    box-shadow: 0 2px 8px rgba(39, 57, 88, 0.16);
}

#generalBackgroundImageConfig_Stage_DataSection .imageListMode_container .imageOpacityToggle_button {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #f2c2d8;
    color: #ea4f93;
    background: #ffffff;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container {
    background: #f4f7fb;
    border: 1px solid #dde5f0;
    border-radius: 18px;
    padding: 12px;
    margin-top: 4px;
    box-shadow: inset 0 1px 0 #ffffff;
    height: clamp(212px, 33vh, 248px);
    overflow-y: auto;
    overflow-x: hidden;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .imageAdjustments_header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .imageAdjustments_title {
    display: block;
    margin: 0;
    font-size: 12px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    font-weight: 700;
    color: #8c9cb6;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .imageAdjustments_header_reset {
    display: inline-flex;
    margin-left: auto;
    flex: 0 0 auto;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .opacity_editors_row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundRenderModeEditors,
#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .opacity_sliderSection {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    padding-right: 0;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundRenderModeEditors {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeActions {
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 2px;
    display: none;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeReset_button {
    border: 1px solid #d5deec;
    background: #ffffff;
    color: #7e8fa8;
    padding: 6px 11px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeGroup {
    display: grid;
    grid-template-columns: minmax(68px, auto) max-content;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e5ebf4;
    border-radius: 12px;
    padding: 7px 9px;
    justify-content: start;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeGroup_label {
    order: 1;
    justify-self: start;
    min-width: 0;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: #8798b1;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeOptions {
    order: 2;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    padding: 3px;
    gap: 3px;
    border: 0;
    border-radius: 10px;
    background: #edf2f9;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeOption {
    font-size: 10px;
    padding: 5px 6px;
    border-radius: 8px;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeOption.selected {
    background: #ea4f93;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(234, 79, 147, 0.35);
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .opacity_sliderSection {
    order: 2;
    background: #ffffff;
    border: 1px solid #e5ebf4;
    border-radius: 12px;
    padding: 8px 10px 8px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .generalBackgroundImage_opacity_title h5 {
    margin: 0;
    font-size: 10px;
    color: #8a98ae;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    justify-self: start;
    text-align: left;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .opacity_imageSelector_inputSection {
    margin-top: 0;
    order: 2;
    justify-self: end;
    width: 100%;
}

#generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .generalBackgroundImage_opacity_title {
    order: 1;
    justify-self: start;
}

@media (max-width: 768px) {
    #generalBackgroundImageConfig_Stage_DataSection .imageListMode_container {
        grid-template-columns: 1fr auto auto;
        gap: 8px;
    }

    #generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container {
        height: clamp(206px, 36vh, 248px);
        padding: 10px;
    }

    #generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeGroup {
        grid-template-columns: minmax(64px, auto) max-content;
        align-items: center;
        gap: 10px;
    }

    #generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeGroup_label {
        min-width: 0;
        text-align: left;
        justify-self: start;
    }

    #generalBackgroundImageConfig_Stage_DataSection .imageAdjustments_container .backgroundModeOptions {
        width: max-content;
        max-width: 100%;
    }
}

.useImageOption_Container .imageAdjustments_container .opacity_clearEffectsButtonContainer {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 20px;
}

.useImageOption_Container .imageAdjustments_container .imageEffectsReset_button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #e4e6ec;
    background: #ffffff;
    color: #8d92a0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(26, 30, 39, 0.12);
    transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease;
}

.useImageOption_Container .imageAdjustments_container .imageEffectsReset_button:hover {
    color: #d95b9a;
    border-color: #f2b8d3;
    background: #fff7fb;
}

.useImageOption_Container .imageAdjustments_container .imageEffectsReset_button:active {
    transform: scale(0.97);
}

.useImageOption_Container .imageAdjustments_container .imageEffectsReset_button i {
    font-size: 14px;
    pointer-events: none;
}

.useImageOption_Container .imageAdjustments_container .opacity_colorField {
    flex: 1 1 50%;
    min-width: 0;
}

.useImageOption_Container .imageAdjustments_container .opacity_colorField_label {
    display: block;
    margin: 0 0 6px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #8b909b;
}

.useImageOption_Container .imageAdjustments_container .NonSvgColorPicker_input {
    opacity: 0;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
}

.useImageOption_Container .imageAdjustments_container .opacity_colorField .clr-field .NonSvgColorPicker_input {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer;
    z-index: 3;
}

.useImageOption_Container .imageAdjustments_container .opacity_colorField .clr-field {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

.useImageOption_Container .imageAdjustments_container .opacity_colorField .clr-field button {
    width: 36px;
    height: 36px;
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    transform: none;
    border-radius: 50%;
    border: 2px solid #e6e7ec;
    box-shadow: 0 1px 4px rgba(26, 30, 39, 0.12);
}

.useImageOption_Container .imageAdjustments_container .opacity_colorField .clr-field button::after {
    display: none !important;
}

.useImageOption_Container .imageAdjustments_container .opacity_colorField.no-color-selected .clr-field button {
    background: #ffffff !important;
    background-image: none !important;
    color: transparent !important;
}

.useImageOption_Container .imageAdjustments_container .opacity_colorField.no-color-selected .clr-field button::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    width: 2px;
    height: 22px;
    border-radius: 2px;
    background: #b4bac6;
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}

.useImageOption_Container .imageAdjustments_container .generalBackgroundImage_opacity_title h5 {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8b909b;
}

.useImageOption_Container .imageAdjustments_container .opacity_sliderSection {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 8px;
}

.useImageOption_Container .imageAdjustments_container .opacity_imageSelector_inputSection {
    position: relative;
    margin-bottom: 0;
}

.useImageOption_Container .imageAdjustments_container .opacity_imageSelector_input {
    opacity: 0;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    position: absolute;
    pointer-events: none;
}

.useImageOption_Container .imageAdjustments_container .irs {
    margin-bottom: 0 !important;
}

.useImageOption_Container .imageAdjustments_container .irs--flat .irs-line {
    top: 20px;
    height: 5px;
    border-radius: 999px;
    background: #d6d8df;
}

.useImageOption_Container .imageAdjustments_container .irs-line {
    top: 20px;
    height: 5px;
    border-radius: 999px;
    background: #d6d8df;
}

.useImageOption_Container .imageAdjustments_container .irs--flat .irs-bar {
    top: 20px;
    height: 5px;
    border-radius: 999px;
    background: #d95b9a;
}

.useImageOption_Container .imageAdjustments_container .irs-bar {
    top: 20px;
    height: 5px;
    border-radius: 999px;
    background: #d95b9a;
}

.useImageOption_Container .imageAdjustments_container .irs--flat .irs-handle {
    top: 14px;
    width: 14px;
    height: 14px;
}

.useImageOption_Container .imageAdjustments_container .irs-slider {
    width: 14px;
    height: 14px;
    top: 14px;
    border-radius: 50%;
    border: 0;
    background: #d95b9a;
    box-shadow: 0 1px 4px rgba(45, 20, 35, 0.24);
}

.useImageOption_Container .imageAdjustments_container .irs--flat .irs-handle > i:first-child {
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    border-radius: 50%;
    background: #d95b9a;
    border: 0;
    box-shadow: 0 1px 4px rgba(45, 20, 35, 0.24);
}

.useImageOption_Container .imageAdjustments_container .irs--flat .irs-min,
.useImageOption_Container .imageAdjustments_container .irs--flat .irs-max {
    display: block !important;
    top: 6px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    color: #a0a6b2;
    background: transparent !important;
}

.useImageOption_Container .imageAdjustments_container .irs--flat .irs-from,
.useImageOption_Container .imageAdjustments_container .irs--flat .irs-to {
    display: none !important;
}

.useImageOption_Container .imageAdjustments_container .irs--flat .irs-single {
    top: 2px;
    right: 0;
    left: auto !important;
    transform: none !important;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: #7e8ca2;
    border-radius: 20px;
    padding: 3px 8px;
    line-height: 1;
}

.useImageOption_Container .imageAdjustments_container .irs--flat .irs-single::before {
    display: none;
}

/* Tabs estilo segmentado para selector de origen de imagen en decoración */
#DecorationImagesConfig_popup .mapImageType_container {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #e2e2e6;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 8px;
    margin-left: 4px;
    margin-right: 4px;
    width: calc(100% - 8px);
    box-sizing: border-box;
}

#DecorationImagesConfig_popup .mapImageType_container .imageSourceSelectorOption {
    float: none;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 22px;
    background: #f4f5f8;
    color: #858a97;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

#DecorationImagesConfig_popup .mapImageType_container .imageSourceSelectorOption.selected {
    background: #f87eb7;
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(19, 21, 26, .14);
}

#DecorationImagesConfig_popup .mapImageType_container .imageSourceSelectorOption > div {
    float: none;
    width: auto;
    padding: 0;
}

#DecorationImagesConfig_popup .mapImageType_container .imageSourceSelectorOption .bo-tab-label-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

#DecorationImagesConfig_popup .mapImageType_container .imageSourceSelectorOption img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
    border-radius: 0 !important;
}

#DecorationImagesConfig_popup .mapImageType_container .imageSourceSelectorOption span {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

/* Tabs del popup de fondo (Galeria / Subir / Colores) */
#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(180deg, #e9edf3 0%, #e3e7ed 100%);
    border: 1px solid #d7dde6;
    border-radius: 14px;
    padding: 4px;
    margin: 4px 4px 10px;
    width: calc(100% - 8px);
    box-sizing: border-box;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption {
    flex: 1 1 0;
    margin: 0;
    min-height: 40px;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #7b8798;
    background: transparent;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption:hover:not(.selected) {
    background: rgba(255, 255, 255, 0.55);
    color: #667588;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption > div {
    width: auto;
    float: none;
    padding: 0;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption .bo-tab-label-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption .bo-tab-loading-indicator {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption .bo-tab-loading-indicator i {
    font-size: 11px;
}

#generalBackgroundImageConfig_Stage_DataSection[data-upload-processing="1"] .mapImageType_container .imageSourceSelectorOption.selected[data-image-source="UploadImage"] .bo-tab-main-label {
    display: none;
}

#generalBackgroundImageConfig_Stage_DataSection[data-upload-processing="1"] .mapImageType_container .imageSourceSelectorOption.selected[data-image-source="UploadImage"] .bo-tab-loading-indicator {
    display: inline-flex;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption span {
    display: block;
    text-align: center;
    white-space: nowrap;
    font-weight: inherit;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption .bo-tab-icon-right {
    display: none !important;
    align-items: center;
    justify-content: center;
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    border-radius: 0 !important;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption .bo-tab-icon-left {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
    border-radius: 0 !important;
}
#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption .bo-tab-icon-left:not(.hide) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption .bo-tab-icon-left.hide {
    display: none !important;
}

#generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption.selected {
    background: #ffffff;
    color: #2396c8;
    box-shadow: 0 1px 3px rgba(28, 41, 63, .12), inset 0 1px 0 rgba(255,255,255,0.95);
}

/* Modo de fondo por colores */
#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container {
    margin: 4px 4px 10px;
    padding: 10px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #f7f9fd;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .backgroundColorModeTabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e9eef6;
    border: 1px solid #dbe3f0;
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 8px;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorModeOption {
    border: 0;
    background: transparent;
    color: #7e8797;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorModeOption.selected {
    background: #ea4f93;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(52, 26, 44, 0.24);
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .backgroundColorControls {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 10px;
    margin-bottom: 8px;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorPickers {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorPickers .opacity_colorField {
    min-width: 78px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorPickers .opacity_colorField_label {
    order: 1;
    font-size: 11px;
    font-weight: 700;
    color: #8d98a9;
    margin: 0;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgGradientAngle_wrap {
    min-width: 92px;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgGradientAngle_label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #8c97a8;
    margin-bottom: 4px;
    text-transform: uppercase;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgGradientAngle_select {
    height: 34px;
    border-radius: 10px;
    border: 1px solid #d9e1ed;
    color: #627089;
    font-weight: 700;
    background: #fff;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorPreview {
    width: 68px;
    min-width: 68px;
    height: 68px;
    border-radius: 12px;
    border: 1px solid #d9e1ed;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    background: #f7dbe9;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgPaletteList {
    max-height: 104px;
    overflow-y: auto;
    padding-right: 2px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 8px;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgPaletteItem {
    border: 1px solid #d2dae8;
    border-radius: 10px;
    height: 34px;
    width: 100%;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgPaletteItem:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(35, 60, 95, 0.14);
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgPaletteItem.selected {
    border-color: #ea4f93;
    box-shadow: 0 0 0 2px rgba(234, 79, 147, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorPickers .boBgColorPicker {
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    pointer-events: auto;
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: pointer;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorPickers .opacity_colorField .clr-field {
    order: 2;
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    margin: 0;
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorPickers .opacity_colorField .clr-field button {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    left: 0 !important;
    top: 0 !important;
    right: auto;
    bottom: auto;
    transform: none !important;
    border: 2px solid #d8e0eb;
    box-shadow: 0 1px 5px rgba(48, 67, 96, 0.12), inset 0 1px 0 rgba(255,255,255,0.95);
}

#generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorPickers .opacity_colorField .clr-field button::after {
    display: none !important;
}

@media (max-width: 600px) {
    #generalBackgroundImageConfig_Stage_DataSection .mapImageType_container {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        border-radius: 12px;
    }

    #generalBackgroundImageConfig_Stage_DataSection .mapImageType_container .imageSourceSelectorOption {
        min-height: 38px;
        padding: 7px 8px !important;
        font-size: 13px;
    }

    #generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container {
        margin-left: 0;
        margin-right: 0;
        padding: 9px;
        border-radius: 12px;
    }

    #generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .backgroundColorControls {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgColorPreview {
        width: 100%;
        height: 48px;
        border-radius: 10px;
    }

    #generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgPaletteList {
        max-height: 96px;
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 7px;
    }

    #generalBackgroundImageConfig_Stage_DataSection .backgroundColorSource_container .boBgPaletteItem {
        height: 30px;
    }
}

.goToGoogleMapButton[data-valid="false"] { opacity: 0.7; }
#EventLocations_section .showExtenalGoogleMapButton_tooltip{
    color: #f84e4e;
    font-weight: bolder;
}
#EventLocations_section .wedding-map-section { position: relative; max-width: 800px; margin: 0 auto; }
#EventLocations_section .map-container { position: relative; }

.no-unified-color {
    background: repeating-linear-gradient(
        45deg,
        #cccccc 0px,
        #cccccc 10px,
        #ffffff 10px,
        #ffffff 20px
    );
}
 
/****************************************** music css  */

#BackgroundMusic_section .music-container {
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e4ebf5;
    box-shadow: 0 1px 4px rgba(40, 55, 88, 0.06);
}
#BackgroundMusic_section .music-placeholder {
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border: 1.8px dashed #b6c4d9;
    background: #f7faff;
    border-radius: 10px;
}
#BackgroundMusic_section .music-icon {
    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
    font-size: 28px; background: #ff80ab; border-radius: 50%; position: relative;
}
#BackgroundMusic_section .music-icon i { color: white; }
#BackgroundMusic_section .music-icon.playing { animation: pulse 1.5s infinite; }
#BackgroundMusic_section .music-player.playing .wave {
    position: absolute; width: 100%; height: 100%; background: rgba(255, 128, 171, 0.5);
    border-radius: 50%; animation: wave-animation 2s infinite;
}
#BackgroundMusic_section .wave:nth-child(2) { animation-delay: 0.5s; }
#BackgroundMusic_section .wave:nth-child(3) { animation-delay: 1s; }

#MusicLibrary_swiper.selectableImage .checkbox-label{
    left: -25px !important;
}

#MusicLibrary_swiper.swiper{ padding: 16px; }

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes wave-animation {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

#BackgroundMusic_section .progress-bar {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    position: relative; margin-top: 10px; color: #4d607f; font-size: 14px; background-color: inherit; padding-bottom: 16px;
}
#BackgroundMusic_section .bar { position: relative; width: 70%; height: 4px; background: #c9d5e7; border-radius: 2px; }
#BackgroundMusic_section .progress { height: 100%; background: pink; width: 0; transition: width 0.1s linear; }
#BackgroundMusic_section .progress-ball {
    position: absolute; top: -4px; left: 0; width: 12px; height: 12px; background: rgb(223, 81, 105);
    border-radius: 50%; transform: translateX(-50%); transition: left 0.1s linear;
}
#BackgroundMusic_section .song-info { align-items: center; justify-content: center; margin-top: 18px; }
#BackgroundMusic_section .song-info button {
    margin-right: 10px; background: none; border: none; cursor: pointer; font-size: 18px;
}
#BackgroundMusic_section .song-info span { font-size: 16px; font-weight: bold; }
#BackgroundMusic_section #songTitle {
    display: block; width: 100%; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#BackgroundMusic_section{
    background: linear-gradient(180deg, #f7f9fc 0%, #edf3fa 100%);
    border: 1px solid #dbe4f1;
    border-radius: 16px;
    padding: 14px 12px 18px;
    color: #33445f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#BackgroundMusic_section #MusicModeSelector_section,
#BackgroundMusic_section #MusicLibrary_section,
#BackgroundMusic_section #bmCustomization_section {
    background: #ffffff;
    border: 1px solid #e2e9f3;
    border-radius: 14px;
    padding: 10px 10px 12px;
    box-shadow: 0 1px 4px rgba(41, 59, 92, 0.05);
}

#BackgroundMusic_section #MusicModeSelector_section h4,
#BackgroundMusic_section #MusicLibrary_section h5 {
    margin-top: 0;
    color: #425778;
    font-weight: 700;
}

#BackgroundMusic_section #MusicMode_hint {
    color: #617a9f;
}

#BackgroundMusic_section #MusicModeSelector_swiper {
    background: #f7faff;
    border: 1px solid #e3ebf7;
    border-radius: 12px;
    padding: 10px 8px;
}

#BackgroundMusic_section #MusicModeSelector_swiper .swiper-slide {
    background: #ffffff;
    border: 1px solid #e4eaf4;
    border-radius: 14px;
    padding: 10px 8px 8px;
    box-shadow: 0 1px 4px rgba(32, 54, 90, 0.06);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

#BackgroundMusic_section #MusicModeSelector_swiper .swiper-slide .option-title {
    color: #4b5f7f;
    font-weight: 700;
}

#BackgroundMusic_section #MusicModeSelector_swiper .swiper-slide .option-type {
    color: #8a9bb6 !important;
}

#BackgroundMusic_section #MusicModeSelector_swiper .swiper-slide.is-selected {
    border-color: #ea4f93;
    box-shadow: 0 4px 12px rgba(234, 79, 147, 0.24);
    transform: translateY(-1px);
}

#BackgroundMusic_section #MusicModeSelector_swiper .swiper-slide.is-selected .option-title {
    color: #ea4f93;
}

#BackgroundMusic_section #MusicModeSelector_swiper .swiper-slide.is-selected .bm-style-thumb {
    background: #fff5fa;
    border: 1px solid #f6c5dc;
    border-radius: 10px;
}

#BackgroundMusic_section #MusicModeSelector_swiper .checkbox-label {
    top: 8px !important;
    left: 8px !important;
}

#BackgroundMusic_section .bm-custom-toggle {
    border-color: #e1e8f4;
    background: #f8fbff;
    border-radius: 12px;
}

#BackgroundMusic_section .bm-custom-toggle i,
#BackgroundMusic_section .bm-custom-toggle span {
    color: #506784;
}

#BackgroundMusic_section .bm-custom-body .panel {
    border: 1px solid #e4eaf4;
    border-radius: 12px;
    box-shadow: none;
    background: #ffffff;
}

#BackgroundMusic_section .bm-style-thumb {
    border-radius: 10px;
}

#BackgroundMusic_section .select2-container--default .select2-selection--single {
    border: 1px solid #dbe4f1 !important;
    border-radius: 10px !important;
    min-height: 36px;
    background: #f9fbff;
}

#BackgroundMusic_section .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    color: #506784;
    font-weight: 600;
}

#BackgroundMusic_section .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}

@media (max-width: 768px) {
    #BackgroundMusic_section {
        padding: 12px 10px 14px;
        border-radius: 14px;
    }

    #BackgroundMusic_section #MusicModeSelector_section,
    #BackgroundMusic_section #MusicLibrary_section,
    #BackgroundMusic_section #bmCustomization_section {
        padding: 9px 8px 10px;
    }
}


/* --- Selector de modo (scroll vertical) --- */
.music-mode-picker { margin-bottom: 10px; }
.music-mode-picker .mode-list {
  display: flex; gap: 12px; max-height: 220px; overflow-y: auto; padding-right: 6px;
}
.icon-selector {
  cursor: pointer; padding: 12px; border: 1px solid #e5e5e5;
  border-radius: 12px; text-align: center; transition: box-shadow .2s, transform .1s; background: #fff;
}
.icon-selector:hover { box-shadow: 0 8px 20px rgba(0,0,0,.06); transform: translateY(-1px); }
.icon-selector .label { margin-top: 8px; font-weight: 600; }
.icon-selector .preview { height: 96px; display: grid; place-items: center; position: relative; }
.icon-selector .preview i { font-size: 28px; }

/* Estado seleccionado (tal cual pediste) */
.icon-selector.selected {
  border: 2px solid #c212ff; background-color: #edddf8; border-radius: 20px;
}

/* --- Burbuja flotante (modo 1) --- */
.floating-music-bubble {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 64px; height: 64px; border-radius: 999px; background: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.floating-music-bubble .bubble-core {
  position: relative; width: 56px; height: 56px; border-radius: 999px; background: #f7f0ff;
  display: grid; place-items: center; animation: music-pulse 1.8s ease-in-out infinite;
}
.floating-music-bubble .wave { position:absolute; inset:0; border:2px solid rgba(194,18,255,.25);
  border-radius:999px; animation: music-ripple 2.2s linear infinite; }
.floating-music-bubble .wave.w2 { animation-delay: .6s; }
.floating-music-bubble .wave.w3 { animation-delay: 1.2s; }
.floating-music-bubble .icon { position:relative; z-index:2; font-size: 22px; color:#6b1fb0; }
.floating-music-bubble .slash { position:absolute; z-index:3; width:2px; height:32px; background:#b00020;
  transform: rotate(-35deg); border-radius:2px; display:none; }

.floating-music-bubble.muted .bubble-core { animation-play-state: paused; opacity: .7; }
.floating-music-bubble.muted .wave { animation-play-state: paused; opacity: 0; }
.floating-music-bubble.muted .slash { display:block; }

@keyframes music-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes music-ripple { 0%{transform:scale(1);opacity:.25} 70%{opacity:.1} 100%{transform:scale(1.6);opacity:0} }



/* Para tu .music-player actual (modo 2) ya tienes estilos; si quieres bola más fácil de arrastrar */
.music-player .progress-bar .bar { cursor: pointer; }

/* Contenedor de preview donde �?oinyectamos�?� la UI del modo elegido */
#MusicModePreview_mount { margin-top: 12px; }

/* Burbuja inline (preview dentro del configurador, NO fixed) */
.preview-bubble-inline {
  width: 64px; height: 64px; border-radius: 999px; background: #fff; 
  display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.preview-bubble-inline .core {
  position: relative; width: 56px; height: 56px; border-radius: 999px; background: #f7f0ff; display:grid; place-items:center;
  animation: music-pulse 1.8s ease-in-out infinite;
}
.preview-bubble-inline .wave { position:absolute; inset:0; border:2px solid rgba(194,18,255,.25); border-radius:999px; animation: music-ripple 2.2s linear infinite; }
.preview-bubble-inline .w2 { animation-delay: .6s; }
.preview-bubble-inline .w3 { animation-delay: 1.2s; }
.preview-bubble-inline .icon { position:relative; z-index:2; font-size: 22px; color:#6b1fb0; }
.preview-bubble-inline.muted .core { animation-play-state: paused; opacity: .7; }
.preview-bubble-inline.muted .wave { animation-play-state: paused; opacity: 0; }

/* �?oCabecera�?� inline (preview dentro del configurador, NO fixed) */
.preview-header-inline {
  display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #eee; border-radius:8px; padding:8px 12px;
}
.preview-header-inline .icon { width:36px; height:36px; display:grid; place-items:center; border-radius:999px; background:#f7f0ff; }
.preview-header-inline .title { font-weight:600; }
.preview-header-inline .status { font-size: 12px; opacity:.7; }
.preview-header-inline.paused .status::after { content:" �?� Pausado"; }
.preview-header-inline:not(.paused) .status::after { content:" �?� Reproduciendo"; }

/* Animaciones compartidas */
@keyframes music-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes music-ripple { 0%{transform:scale(1);opacity:.25} 70%{opacity:.1} 100%{transform:scale(1.6);opacity:0} }


/*///////////////////////////////////////////////////////////////////////////////////////////////////// */

#EventLocations_section .generalBackgroundImage_opacity_title { display: none; }

/* Dial */
#rotationDial { position: relative; width: 100px; height: 100px; border-radius: 50%; border: 2px solid #ccc; }
#rotationDialPunter {
    position: absolute; top: 50%; left: 50%; width: 2px; height: 40%;
    background-color: red; transform-origin: bottom center; transform: rotate(0deg);
}

/* Animación inicial tipo "zoom de selección" */
@keyframes selectZoom {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* Animación continua tipo "latido" más suave */
@keyframes pulseConstant {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

.selectedContent {
    animation: selectZoom 0.4s ease-out;
    display: block; 
    max-width: 100% !important;
    cursor: move;
    -ms-touch-action: none;
    transform-origin: center center;
    will-change: transform;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    pointer-events: auto !important;
    z-index: 10 !important;
}

/* Countdown: mantener layout horizontal aunque el contenedor este seleccionado */
#invitation-preview #Countdown_container_2 #EventTimer_container,
#template-content #Countdown_container_2 #EventTimer_container,
#invitation-preview #EventTimer_container,
#template-content #EventTimer_container,
#invitation-preview #EventTimer_container.selectedContent,
#template-content #EventTimer_container.selectedContent {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: auto !important;
    width: fit-content !important;
    max-width: calc(100% - 8px) !important;
    margin: 0 auto !important;
    padding: 0 1px !important;
    box-sizing: border-box !important;
    gap: 24px !important;
}

#invitation-preview #Countdown_container_2 #EventTimer_container .numberElement_section,
#template-content #Countdown_container_2 #EventTimer_container .numberElement_section,
#invitation-preview #EventTimer_container .numberElement_section,
#template-content #EventTimer_container .numberElement_section {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    text-align: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-right: 0 !important;
    position: relative !important;
}

#invitation-preview #Countdown_container_2 #EventTimer_container .numberElement_section:not(:last-child)::after,
#template-content #Countdown_container_2 #EventTimer_container .numberElement_section:not(:last-child)::after,
#invitation-preview #EventTimer_container .numberElement_section:not(:last-child)::after,
#template-content #EventTimer_container .numberElement_section:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: -12px !important; /* centro exacto del gap de 24px */
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 72% !important;
    background: var(--templateColor-2) !important;
    pointer-events: none !important;
}

#invitation-preview #Countdown_container_2 #EventTimer_container .numberElement_section > div,
#template-content #Countdown_container_2 #EventTimer_container .numberElement_section > div,
#invitation-preview #Countdown_container_2 #EventTimer_container .numberElement_section p,
#template-content #Countdown_container_2 #EventTimer_container .numberElement_section p,
#invitation-preview #EventTimer_container .numberElement_section > div,
#template-content #EventTimer_container .numberElement_section > div,
#invitation-preview #EventTimer_container .numberElement_section p,
#template-content #EventTimer_container .numberElement_section p {
    white-space: nowrap !important;
    margin: 0 !important;
    line-height: 1.04 !important;
}

#invitation-preview #Countdown_container_2 #EventTimer_container .numberElement_section .genericTimePeriods_Text,
#template-content #Countdown_container_2 #EventTimer_container .numberElement_section .genericTimePeriods_Text,
#invitation-preview #EventTimer_container .numberElement_section .genericTimePeriods_Text,
#template-content #EventTimer_container .numberElement_section .genericTimePeriods_Text {
    margin-top: 2px !important;
    line-height: 1.05 !important;
    font-size: clamp(13px, 2.8vw, 18px) !important;
    letter-spacing: .3px !important;
}

@media (max-width: 420px) {
    #invitation-preview #Countdown_container_2 #EventTimer_container,
    #template-content #Countdown_container_2 #EventTimer_container,
    #invitation-preview #EventTimer_container,
    #template-content #EventTimer_container {
        width: calc(100% - 8px) !important;
    }

    #invitation-preview #Countdown_container_2 #EventTimer_container .numberElement_section,
    #template-content #Countdown_container_2 #EventTimer_container .numberElement_section,
    #invitation-preview #EventTimer_container .numberElement_section,
    #template-content #EventTimer_container .numberElement_section {
        padding: 0 !important;
    }
}

/* Corazon debajo del contador, centrado */
#invitation-preview #Countdown_container #Countdown_heart_container,
#invitation-preview #Countdown_container_1 #Countdown_heart_container,
#invitation-preview #Countdown_container_2 #Countdown_heart_container,
#template-content #Countdown_container #Countdown_heart_container,
#template-content #Countdown_container_1 #Countdown_heart_container,
#template-content #Countdown_container_2 #Countdown_heart_container {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    text-align: center !important;
    margin: 26px auto 8px !important;
    transform: none !important;
    inset: auto !important;
}

#invitation-preview #Countdown_heart_container.heart-container,
#template-content #Countdown_heart_container.heart-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 26px auto 8px !important;
    transform: none !important;
}

#invitation-preview #Countdown_heart_container.heart-container .heart,
#template-content #Countdown_heart_container.heart-container .heart {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 auto !important;
    transform: rotate(-45deg) !important;
    animation: boCountdownHeartBeat 1.1s ease-in-out infinite !important;
}

/* Fecha inferior del countdown: centrada bajo el corazon */
#invitation-preview #Countdown_container #countdown_bottomTitle,
#invitation-preview #Countdown_container_1 #countdown_bottomTitle,
#invitation-preview #Countdown_container_2 #countdown_bottomTitle,
#template-content #Countdown_container #countdown_bottomTitle,
#template-content #Countdown_container_1 #countdown_bottomTitle,
#template-content #Countdown_container_2 #countdown_bottomTitle {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 14px auto 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

#invitation-preview #Countdown_container #countdown_bottomTitle .editableItem,
#invitation-preview #Countdown_container_1 #countdown_bottomTitle .editableItem,
#invitation-preview #Countdown_container_2 #countdown_bottomTitle .editableItem,
#template-content #Countdown_container #countdown_bottomTitle .editableItem,
#template-content #Countdown_container_1 #countdown_bottomTitle .editableItem,
#template-content #Countdown_container_2 #countdown_bottomTitle .editableItem,
#invitation-preview #Countdown_container #countdown_bottomTitle h1,
#invitation-preview #Countdown_container #countdown_bottomTitle h2,
#invitation-preview #Countdown_container #countdown_bottomTitle h3,
#invitation-preview #Countdown_container #countdown_bottomTitle h4,
#invitation-preview #Countdown_container #countdown_bottomTitle h5,
#invitation-preview #Countdown_container #countdown_bottomTitle p,
#template-content #Countdown_container #countdown_bottomTitle h1,
#template-content #Countdown_container #countdown_bottomTitle h2,
#template-content #Countdown_container #countdown_bottomTitle h3,
#template-content #Countdown_container #countdown_bottomTitle h4,
#template-content #Countdown_container #countdown_bottomTitle h5,
#template-content #Countdown_container #countdown_bottomTitle p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}

#invitation-preview #Countdown_container .heart-container.selectedContent,
#invitation-preview #Countdown_container_1 .heart-container.selectedContent,
#invitation-preview #Countdown_container_2 .heart-container.selectedContent,
#template-content #Countdown_container .heart-container.selectedContent,
#template-content #Countdown_container_1 .heart-container.selectedContent,
#template-content #Countdown_container_2 .heart-container.selectedContent {
    display: flex !important;
}

#invitation-preview #Countdown_container.bo-countdown-frame-managed,
#invitation-preview #Countdown_container_1.bo-countdown-frame-managed {
    background: none !important;
    background-image: none !important;
}

#invitation-preview #Countdown_container.bo-countdown-frame-managed #Countdown_container_2,
#invitation-preview #Countdown_container_1.bo-countdown-frame-managed #Countdown_container_2 {
    position: relative;
    z-index: 2;
}

#invitation-preview .bo-countdown-frame-layer {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border: 0 !important;
    outline: none !important;
    image-rendering: auto;
}

#invitation-preview .bo-countdown-frame-layer:not([src]),
#invitation-preview .bo-countdown-frame-layer[src=""],
#invitation-preview .bo-countdown-frame-layer[src*="Imagen_no_disponible"] {
    display: none !important;
}

#invitation-preview #Countdown_container.bo-countdown-frame-managed .bo-countdown-frame-layer,
#invitation-preview #Countdown_container_1.bo-countdown-frame-managed .bo-countdown-frame-layer {
    z-index: 120 !important;
}

#invitation-preview #Countdown_container .heart-container.editableItem,
#invitation-preview #Countdown_container_1 .heart-container.editableItem,
#invitation-preview #WeddingCountdown_Type .heart-container.editableItem,
#invitation-preview #WeddingCountdown_Type_1 .heart-container.editableItem {
    position: relative !important;
    z-index: 130 !important;
    cursor: move;
    pointer-events: auto !important;
}

#invitation-preview #Countdown_container .heart-container.editableItem .heart,
#invitation-preview #Countdown_container_1 .heart-container.editableItem .heart,
#invitation-preview #WeddingCountdown_Type .heart-container.editableItem .heart,
#invitation-preview #WeddingCountdown_Type_1 .heart-container.editableItem .heart {
    pointer-events: none !important;
}

@keyframes boCountdownHeartBeat {
    0%, 100% { transform: rotate(-45deg) scale(1); }
    25% { transform: rotate(-45deg) scale(1.08); }
    50% { transform: rotate(-45deg) scale(1.14); }
    75% { transform: rotate(-45deg) scale(1.08); }
}

img.selectedContent.reset { transition: transform 0.3s ease-in-out !important; }

.decoration-image {
    position: absolute;
    width: 50%;
    z-index: 2 !important;
    opacity: 1 !important;
    animation: none !important;
}

@keyframes bounceSelect {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-10px); }
    60%  { transform: translateY(5px); }
    100% { transform: translateY(0); }
}

/* New Radial */
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

:root {
  --light1: rgb(255 255 255 / 6.25%);
  --light2: rgb(255 255 255 / 12.5%);
  --light3: rgb(255 255 255 / 25%);
  --dark1: rgb(0 0 0 / 25%);
  --dark2: rgb(0 0 0 / 50%);
  --dark3: rgb(0 0 0 / 75%);
  --led: #fc8553;
  --led2: #ff4576;
  --bg: #242327;
}

#rotationDial_container_new{
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  font-family: 'Orbitron', sans-serif;
}
.base-parent { width: 100px; height: 100px; background-color: var(--bg); border-radius: 100%; }
.base {
  position: relative; width: 100%; height: 100%; border: 1px solid var(--light1);
  border-radius: 50%; box-shadow: inset 0 -10px 20px var(--dark3), inset 0 10px 20px var(--light2);
}
.base-notch {
  position: absolute; transform: translate(-50%, -50%); width: 4%; height: 4%;
  background-color: var(--light3); border-radius: 999px; transition: all .2s ease-in;
}
.base-notch:nth-of-type(1) { top: 80.052%; left: 19.948%; }
.base-notch:nth-of-type(2) { top: 63.1332%; left: 9.5801%; }
.base-notch:nth-of-type(3) { top: 43.3515%; left: 8.02325%; }
.base-notch:nth-of-type(4) { top: 25.0191%; left: 15.6168%; }
.base-notch:nth-of-type(5) { top: 12.1322%; left: 30.7054%; }
.base-notch:nth-of-type(6) { top: 7.5%; left: 50%; }
.base-notch:nth-of-type(7) { top: 12.1322%; left: 69.2946%; }
.base-notch:nth-of-type(8) { top: 25.0191%; left: 84.3832%; }
.base-notch:nth-of-type(9) { top: 43.3515%; left: 91.9768%; }
.base-notch:nth-of-type(10){ top: 63.1332%; left: 90.4199%; }
.base-notch:nth-of-type(11){ top: 80.052%; left: 80.052%; }

.knob { position: absolute; top: 15%; left: 15%; transform: rotate(-135deg); width: 70%; height: 70%; background-color: var(--light3); border-radius: 50%; transition: box-shadow .4s ease-in; }
.knob-shadow { position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; border-radius: 50%; background-image: linear-gradient(0deg, var(--dark2), var(--light3)); box-shadow: 0 10px 20px var(--dark3), 0 -10px 20px var(--light2); }
.knob-notch { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); width: 6%; height: 15%; background-color: var(--light3); border-radius: 20px; transition: all .4s ease-in; }
.knob-active { box-shadow: 0 0 20px -8px var(--led2); }
.notch-active { background-color: var(--main-tertiary-color); box-shadow: 0 0 8px var(--led2); }
.value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; text-align: center; color: var(--dark2); text-shadow: 0 0 20px var(--dark3); transition: all .6s ease-in; }
.value-active { color: var(--main-tertiary-color); text-shadow: 0 0 20px var(--led2); }

.align_option{ height: 30px; width: 30px; margin-left: 10px; margin-right: 10px; }
.changeToSolidColor, .changeToGradientColor{ width: 0px; height: 0px; }

.iframeHTML_guide li{ text-align: center; }

#TextToolbarColor_showMoreOptions_container{ margin-top: 4px; margin-left: 10px; }
#TextToolbarColor_showMoreOptions_container img{ width: 40px; }

#AddBKSong_title { color: black; }

[contenteditable="true"]:empty:before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
    display: block;
}

.icon-selector{
    padding: 10px;
    width: 77px;
    margin-bottom: 20px;
    border-right: 1px solid #5b5656;
    border-radius: 10px;
}
.icon-selector.selected{
    border: 2px solid #c212ff;
    background-color: #edddf8;
    border-radius: 20px;
}

ul.custom-list { list-style-type: none; padding-left: 0; text-align: left; }

#ListIconGallery {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.insertion-marker { background: rgb(203, 2, 243); height: 2px; position: absolute; z-index: 9999; }

.insertedContent {
  position: relative;
  min-width: 70%;
  max-width: 90% !important;
  width: auto;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  display: inline-block !important;
  display: block;
  outline: none;
  left: 15%;
}
/* Para listas */
.insertedContentList { list-style: none; padding-left: 30px; position: relative; }
/* Para textos */
.insertedContentText { min-height: 70px; }

/* Elementos por defecto de secciones nuevas: centrado real sin desplazamiento legacy */
.bo-user-inserted-section .bo-user-section-default-item {
  position: relative;
  left: auto !important;
  right: auto !important;
  min-width: 0 !important;
  width: auto;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
  padding: 0 !important;
}

.bo-user-inserted-section img.bo-user-section-default-item {
  display: block;
}

.collision-spacer { display: block; width: 100%; clear: both; }
.dragging { transition: none !important; }
.drag-placeholder {
  background: rgba(0, 0, 0, 0.1);
  height: 50px;
  border-radius: 6px;
  margin: 10px 0;
  pointer-events: none;
}
.insertion-highlight { border: 2px dashed gold !important; transition: border 0.2s; }
.drop-preview { transition: opacity 0.2s ease; }
.drop-zone-preview { outline: none !important; z-index: 0; }
.highlight-drop-target { outline: 2px dashed gold; outline-offset: -4px; background-color: rgba(255, 215, 0, 0.05); }

.bo-new-section-highlight {
  outline: 2px dashed rgba(238, 51, 82, 0.65);
  outline-offset: 8px;
  transition: outline-color .35s ease, outline-offset .35s ease, box-shadow .35s ease;
  box-shadow: 0 0 0 8px rgba(238, 51, 82, 0.12);
}

/* Aceptar flotante en modo gradiente */
#ApplyGradientConfirm_container{ position:absolute; top:-10px; right:10px; z-index:5; }
#ApplySolidConfirm_btn { box-shadow: none !important; }

/* Botón icono compacto */
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; height:34px; }
#TextGradient_gearToggle.active{ background:#f3e8f6; border-color:#e3c8ef; }
#TextGradient_gearToggle.active i{ color:#b22586; }

/* Etiquetas sobre cada picker */
.text-gradient .picker-title{ 
    display:block; 
    font-size:12px;
    margin-bottom:4px; 
    color:#8a5a9f;
    font-weight:600;
    padding-left: 15px;
}

/* Línea avanzada (opciones) */
#TextGradient_advancedPanel{ margin-top:8px; }

/* Tabs absolutos arriba-izquierda del panel gradiente */
#TextGradient_inputSection { position: relative; }
#TextGradient_tabs{
  position: absolute; top: -28px; left: 0;
  display: flex; gap: 6px; z-index: 10;
}
#TextGradient_tabs .tg-tab{
  padding: 4px 10px; font-size: 12px; line-height: 1;
  border: 1px solid #e3c8ef; border-radius: 16px;
  background: #faf5fb; cursor: pointer;
}
#TextGradient_tabs .tg-tab.active{
  background: #f3e8f6; color: #b22586; border-color: #e3c8ef;
}

/* Tabs cabecera del bloque de color */
#ColoPicker_Section { position: relative; }

#ColorModeTabs{
  position:absolute;
  top:-53px; left:-44px; right:-36px;
  display:flex; gap:0;
  z-index: 50; pointer-events:auto;
}
#ColorModeTabs .cmtab{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  margin:0;
  padding:6px 12px;
  border-radius:4px;
  border-bottom:3px solid transparent;
  background:#fff;
  color:#000;
  font-size:15px;
  white-space:nowrap;
  min-width:0;
}
#ColorModeTabs .tab-gradient{ margin-left:0; }
#ColorModeTabs .cmtab img{ width:16px; height:16px; display:block; }
#ColorModeTabs .cmtab.active {
  font-size: 17px; font-weight: bolder; color: #8d1383;
  background: #fff79d; border-color: #e3c8ef; border-bottom: 3px solid #3e3ad6;
}
#ColorModeTabs .cmtab img { width: 18px; height: 18px; display: block; order: 2; }
#ColorModeTabs .cmtab span { order: 1; }

/* Botón aceptar del sólido (flotante) */
#TextColorPicker_inputSection { position: relative; }
#ApplySolidConfirm_container { position: absolute; top: -10px; right: 10px; z-index: 5; }

/* ===================================================================
   BLOQUE NUEVO Y LIMPIO �?" EVENTOS (selector y tarjetas) �?" SIN DUPLICADOS
   =================================================================== */

/* Selector de vista (Simple / Horizontal / Grid) */
#SocialEventsLayoutSelector { margin: 6px 0 10px; }
#SocialEventsLayoutSelector .se-layout-toggle{
  display:inline-flex; gap:6px; border:1px solid rgba(16,24,40,.12);
  border-radius:999px; padding:4px; background:#fff;
}
#SocialEventsLayoutSelector .se-layout-toggle .lt-btn{
  border:0; background:transparent; width:36px; height:32px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
#SocialEventsLayoutSelector .se-layout-toggle .lt-btn i{ font-size:15px; opacity:.8; }
#SocialEventsLayoutSelector .se-layout-toggle .lt-btn.active{ background:#eef4ff; }
#SocialEventsLayoutSelector .se-layout-toggle .lt-btn.active i{ opacity:1; }

/* Contenedor de tarjetas (no cortar dropdowns) */
#SocialEventsPanels{ overflow:visible; }
#SocialEventsPanels .se-row{ margin-left:-8px; margin-right:-8px; }
#SocialEventsPanels .se-col{ padding-left:8px; padding-right:8px; margin-bottom:12px; }

/* Tarjeta base */
#SocialEventsPanels .se-card{
  position:relative;
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
  padding-top:28px;   /* deja espacio para el kebab arriba */
}
#SocialEventsPanels .se-card a{ text-decoration:none; }

/* Kebab (�<�) arriba a la derecha */
#SocialEventsPanels .se-kebab-wrap{ position:absolute; top:8px; right:8px; z-index:2; }
#SocialEventsPanels .se-kebab{
  background:#fff; border:1px solid rgba(16,24,40,.12);
  border-radius:10px; padding:6px 8px;
}
#SocialEventSelector .dropdown-menu{ right:0; left:auto; z-index:1052; }

/* Icono circular común */
#SocialEventsPanels .se-icon{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#f5f9ff; border:1px solid #e1e9ff;
  margin:6px auto;
}
#SocialEventsPanels .se-icon i{ font-size:22px; color:#344054; }

/* Título + descripción */
#SocialEventsPanels .se-title{ font-weight:600; text-align:center; margin:6px 8px 2px; }
#SocialEventsPanels .se-desc{ font-size:12px; color:#667085; text-align:center; margin:0 10px 6px; }

/* --- SIMPLE: icono + título (tarjeta clicable) --- */
#SocialEventsPanels .se-card-simple{
  padding:18px 10px; text-align:center; cursor:pointer; min-height:120px;
}

/* --- GRID: icono + título + desc + botón --- */
#SocialEventsPanels .se-card-grid{
  padding:14px 12px; text-align:center; min-height:170px;
}
#SocialEventsPanels .se-card-grid .se-title{ margin-bottom:2px; }
#SocialEventsPanels .se-card-grid .se-desc{ margin-bottom:6px; }
#SocialEventsPanels .se-card-grid .se-cta .btn{
  padding:5px 10px; font-size:11px; border-radius:10px;
}

/* --- HORIZONTAL: icono izq + texto der --- */
#SocialEventsPanels .se-card-horizontal{ padding:12px; }
#SocialEventsPanels .se-card-horizontal .se-hrow{ display:flex; align-items:center; }
#SocialEventsPanels .se-card-horizontal .col-icon{
  width:30%; max-width:100px; text-align:center;
}
#SocialEventsPanels .se-card-horizontal .col-body{
  width:70%; padding-left:8px;
}
#SocialEventsPanels .se-card-horizontal .se-title{
  text-align:left; margin:0 0 4px;
}
#SocialEventsPanels .se-card-horizontal .se-desc{
  text-align:left; margin:0 0 6px;
}
#SocialEventsPanels .se-card-horizontal .se-cta .btn{
  padding:5px 10px; font-size:11px; border-radius:10px;
}

/* Evitar recortes por overflow en ancestros */
#SocialEventSelector, #SocialEventsPanels, #SocialEventsPanels .se-card{ overflow:visible; }













/* �?" Botón eliminar intervalo: más grande, rojo y flotante arriba-dcha �?" */


#VisibilityWindows_list .panel .panel-body,
#VP_Windows_list .panel .panel-body { position: relative; }

.removeDatePeriod_Floatbutton{
    position: absolute;
    color:rgb(184, 20, 20);
    top: -82px;
    right: -4px;
}

.VP_RemoveWindowBtn {
  position: absolute !important;
  top: 6px;
  right: 8px;
  z-index: 2;
}
.VP_RemoveWindowBtn.btn { 
  padding: 6px 10px; 
  font-size: 14px; 
  line-height: 1; 
}

/* �?" Tabular el <legend> de avanzados �?" */
#AdvancedEventData_fieldset > legend {
  margin-left: 12px;               /* �?otabular�?� a la derecha */
  cursor: pointer;                  /* indica que es plegable */
}

#EventVisibility_fieldset > legend, #EventLocation_fieldset > legend, #EventOther_fieldset > legend{

  margin-left: 40px;               /* �?otabular�?� a la derecha */
  cursor: pointer;                  /* indica que es plegable */
}

/* Opcional: iconito caret para feedback visual */
#AdvancedEventData_fieldset > legend .caret {
  margin-left: 6px;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  display: inline-block;
}


/* InvitationManager.css (o tu hoja común) */
legend .control-arrow{
  float: none !important;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}
legend .control-arrow i{ line-height: 1; }


#ApplyPromoBtn{
    /* background-color: #ffe7bb !important; */
    border: 2px solid #f2c9eb;
    border-radius: 20px;
}


/* Nuevo por testear: Wrapper acciones rápidas para rotar y redimensionar */


/* === Overlay selección === */
.bo-selection-box{
  position:absolute;
   z-index:960;
  /*border:2px solid #ff4da6; border-radius:6px; */
  --bo-actions-shift-x: 0px;
  --bo-actions-pill-bottom: -52px;
  --bo-actions-bottom: -50px;
  pointer-events:none; box-sizing:border-box; user-select:none;
  will-change: transform,left,top,width,height; 
}

.bo-selection-box::after{
  content:"";
  position:absolute;
  left:calc(50% + var(--bo-actions-shift-x));
  bottom:var(--bo-actions-pill-bottom);
  transform:translateX(-50%);
  width:122px;
  height:34px;
  border-radius:20px;
  background:#fff;
  border:1px solid #ececf2;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  pointer-events:none;
  z-index:0;
  transition:left .18s ease, bottom .18s ease;
}

/* Mango �?ofantasma�?� que se mantiene visible durante el drag */
.bo-handle-ghost{
  position:absolute;
  z-index:100001;
  pointer-events:none;
  transform:translate(-50%,-50%);
}

/* Contenedor interno que rota/escala con el elemento */
.bo-selection-box .bo-frame{
  position:absolute;
  left:0; top:0;
  transform-origin: 50% 50%;
}

bo-resizingbo-resizing.bo-resizing { transition: none !important; }


.bo-selection-box.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Handles */
.bo-handle,.bo-rotate,.bo-move,.bo-more{
  pointer-events:auto; user-select:none; touch-action:none;
}
.bo-handle{
  position:absolute; width:24px; height:24px;
  background:#fff; border:2px solid #ff4da6; border-radius:50%;
  box-shadow:0 0 0 2px #fff inset; cursor:pointer;
}

/* Lados (edge) */
.bo-handle.edge{ width:40px; height:14px; border-radius:6px; }

/* Esquinas */
.bo-handle.tl{ left:-6px; top:-6px; cursor:nwse-resize; }
.bo-handle.tr{ right:-6px; top:-6px; cursor:nesw-resize; }
.bo-handle.br{ right:-6px; bottom:-6px; cursor:nwse-resize; }
.bo-handle.bl{ left:-6px; bottom:-6px; cursor:nesw-resize; }

/* Lados */
.bo-handle.tm{ top:-10px; left:50%; transform:translateX(-50%); cursor:ns-resize; }
.bo-handle.bm{ bottom:-10px; left:50%; transform:translateX(-50%); cursor:ns-resize; }
.bo-handle.ml{ left:-20px; top:50%; transform:translateY(-50%) rotate(90deg); cursor:ew-resize; }
.bo-handle.mr{ right:-20px; top:50%; transform:translateY(-50%) rotate(90deg); cursor:ew-resize; }

/* Botones inferiores */
.bo-rotate,.bo-move,.bo-more{
  position:absolute;
  bottom:var(--bo-actions-bottom);
  left:calc(50% + var(--bo-actions-shift-x));
  transform:translateX(-50%);
  width:34px;
  height:30px;
  border:0;
  border-radius:12px;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:1;
  transition:left .18s ease, bottom .18s ease, background-color .18s ease;
}
.bo-rotate{ cursor:grab; }
.bo-rotate:active{ cursor:grabbing; }
.bo-rotate::before{ content:"\f2f1"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:13px; color:#8e95a1; }
.bo-move{ left:calc(50% + var(--bo-actions-shift-x) - 36px); }
.bo-move::before{ content:"\f0b2"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:12px; color:#8e95a1; cursor:move; }
.bo-more{ left:calc(50% + var(--bo-actions-shift-x) + 36px); }
.bo-more::before{ content:"\f142"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:13px; color:#8e95a1; }
.bo-rotate::before,
.bo-move::before,
.bo-more::before{
  width:14px;
  text-align:center;
  line-height:1;
}
.bo-rotate:hover,
.bo-move:hover,
.bo-more:hover{
  background:#f7f8fb;
}
.bo-more::after{
  content:"";
  position:absolute;
  left:-4px;
  top:7px;
  width:1px;
  height:16px;
  background:#ececf2;
}

.bo-selection-box.bo-actions-top{
  --bo-actions-pill-bottom: calc(100% + 12px);
  --bo-actions-bottom: calc(100% + 14px);
}

.bo-selection-box.bo-type-text .bo-rotate{
  cursor:pointer;
}

.bo-selection-box.bo-type-text .bo-rotate:active{
  cursor:pointer;
}

.bo-selection-box.bo-type-text .bo-rotate::before{
  content:"\f303";
  font-size:12px;
}

.bo-selection-box.bo-type-attendance-card .bo-handle{
  display:none !important;
}

.bo-selection-box.bo-type-attendance-card .bo-rotate{
  display:none !important;
}

.bo-selection-box.bo-type-attendance-card .bo-edit::before{
  content:"\f303";
}

.bo-more-menu{
  position:absolute;
  z-index:100020;
  min-width:190px;
  background:#fff;
  border:1px solid #ffd1e6;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  padding:6px;
}
.bo-more-menu .bo-more-menu-item{
  width:100%;
  border:0;
  background:transparent;
  border-radius:8px;
  padding:8px 10px;
  color:#4a4f58;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  text-align:left;
}
.bo-more-menu .bo-more-menu-item i{
  width:14px;
  text-align:center;
  color:#ff4da6;
}
.bo-more-menu .bo-more-menu-item:hover{
  background:#fff0f7;
}

/* Badge de tamaños y grados */
.bo-size-indicator,.bo-rot-indicator{
  position:absolute; z-index:100000; padding:2px 6px;
  font:12px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#fff; background:rgba(0,0,0,.85); border-radius:4px;
  pointer-events:none; white-space:nowrap;
}
.bo-size-indicator{ transform:translate(-50%,-8px); }

/* Anillo de foco en el handle activo */
.bo-focus-ring{
  position:absolute; z-index:100000;
  width:38px; height:38px; border-radius:50%;
  border:3px solid rgba(255,77,166,.5); background:rgba(255,77,166,.08);
  pointer-events:none; transform:translate(-50%,-50%);
}

/* Cursores globales opcionales */
html.bo-cursor-move{ cursor:move!important; }
html.bo-cursor-rot { cursor:grabbing!important; }

.designs-rail{
  position: relative;
  display:flex; gap:10px; overflow-x:auto; padding:6px 2px;
}
.design-card{
  min-width:180px; max-width:220px; background:#fff; border:1px solid #eee;
  border-radius:12px; padding:10px; position:relative; cursor:pointer;
}

/* badge �?oBorrador/Definitivo�?� */
.design-card .badge-state{
  position:absolute; top:6px; left:6px;
  z-index:3; padding:2px 8px; font-size:11px;
  border-radius:999px; background:#eee; color:#333;
}

/* favorito (estrella) pegado al badge */
.design-card .badge-fav{
  position:absolute; top:7px; left:auto; right:auto;
  transform:translate(calc(6px + 70px),0); /* se alinea a la derecha del badge */
  z-index:3; font-size:12px;
}

.design-card.active{ border-color:#ff88ad; box-shadow:0 0 0 2px rgba(255,136,173,.25); }
.design-card .thumb{ width:100%; height:96px; border-radius:8px; object-fit:cover; background:#f7f7f7; }
.design-card .title{ font-weight:600; margin:8px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.design-card .meta{ font-size:12px; color:#777; }
.design-card .menu{ position:absolute; top:6px; right:6px; }
.design-card .menu .btn{ padding:2px 6px; }

.design-card .more-menu{
  position:absolute; top:26px; right:8px;
  z-index:1000; /* por encima del rail */
  background:#fff;border:1px solid #ddd;border-radius:8px;
  min-width:190px; box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.more-menu button{ width:100%; text-align:left; padding:8px 12px; border:none; background:#fff; }
.more-menu button:hover{ background:#f6f6f6; }

/* Toolbar */
#DesignsManager .designs-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: 8px;
}
#DesignsHeader .toggle-btn{
  border:none; background:transparent; font-weight:600; cursor:pointer; padding:6px 4px;
}

#DesignsHeader .chevron{ transition: transform .18s ease; }
#DesignsHeader .chevron.rot-180{ transform: rotate(180deg); }

/* Colapso total del rail */
#DesignsRail.collapsed-hidden{
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0;
}

#BtnNewDesign {
  border-radius: 999px;
  padding: 10px 16px;
  background: #eef6ff;            /* azul MUY claro */
  border: 1px solid #dbeafe;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#BtnNewDesign i { margin-right: 6px; }

/* Rail (lista vertical con scroll) */
#DesignsRail {
  max-height: 220px;               /* altura fija con scroll */
  overflow: auto;
  padding: 6px 2px 10px 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Pill de diseño */
.design-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7f7fb;
  border: 1px solid #ececf3;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}


.design-pill.active {

  border: 3px solid #e9c2d1;
  box-shadow: 0 2px 6px rgba(233, 135, 171, .18);
  background: #fff;
  background-color: #ffeff2;
  font-weight: bolder;
}

.design-pill .title {
  flex: 1;
  min-width: 0;                    /* para ellipsis */
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.design-pill.active .title {

  font-weight: bolder;
}

.design-pill.editing .title { display:none; }

.design-pill .edit-wrap { display:none; flex:1; }
.design-pill.editing .edit-wrap { display:flex; gap:6px; }
.design-pill .edit-wrap input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 8px;
}

/* Acciones */
.design-pill .actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.design-pill .icon-btn {
  border: 1px solid #e8e8ef;
  background: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  line-height: 1;
}
.design-pill .icon-btn:hover { background:#f3f3f8; }

.design-pill .icon-btn.fav.active i { color: #eab308; }       /* estrella */
.design-pill .icon-btn.def.active i { color: #14b8a6; }       /* definitivo */
.design-pill .icon-btn.sel.active i { color: #8b5cf6; }       /* seleccionado */

/* Badge �?oDefinitivo�?� flotando arriba-izquierda */
.design-pill .badge {
  position: absolute;
  top: -8px;
  left: -8px;
  font-size: 11px;
  font-weight: 700;
  color: #0f766e;
  background:#ccfbf1;
  border: 1px solid #99f6e4;
  padding: 2px 6px;
  border-radius: 999px;
}

/* Dropdown muy simple */
.design-pill .menu {
  position: relative;
}
.design-pill .menu .menu-panel{
  position: absolute;
  right: 0;
  top: 32px;
  z-index: 50;
  min-width: 170px;
  background:#fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 6px;
  display:none;
}
.design-pill .menu .menu-item{
  display: flex; gap:8px; align-items:center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.design-pill .menu .menu-item:hover{ background:#f3f4f6; }

/* Menu flotante fuera del contenedor con scroll */
.floating-design-menu {
  position: fixed;            /* clave para salir del scroll */
  z-index: 9999;              /* por encima del rail */
  min-width: 180px;
  background:#fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 6px;
}
.floating-design-menu .menu-item{
  display: flex; gap:8px; align-items:center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.floating-design-menu .menu-item:hover{ background:#f3f4f6; }

/* Estrella dentro del badge (favorito) */
.design-pill .badge .fav-badge {
  margin-left: 6px;
  color: #eab308;      /* dorado */
  font-size: 12px;
  vertical-align: -1px;
}


img.dc-section-icon{
  height:36px !important;
  width: 36px !important;
  margin-right:6px;
}

.AdminUser_email_edit_toggle { cursor:pointer; transition: all .15s ease; }
.AdminUser_email_edit_toggle:hover { opacity: .9; }

.AdminUser_header{
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.AdminUser_header::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 45, 141, 0.18);
}

.AdminUser_email_edit_toggle.is-editing { font-weight: 600; }
.adminUser_email_inline_input.is-editing { border-width: 2px; }

.AdminUser_email_edit_toggle.is-disabled {
  opacity: .35;
  pointer-events: none;
  cursor: default;
}

.AdminUser_body,
.adminUser_custom_fields,
.adminUser_custom_fields .form-group,
.adminUser_custom_fields .form-control {
  pointer-events: auto !important;
}

.adminUser_custom_fields .adminUser_other_name_input,
.adminUser_custom_fields .adminUser_other_surnames_input,
.adminUser_custom_fields .adminUser_name_input,
.adminUser_custom_fields .adminUser_surnames_input {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  touch-action: manipulation !important;
  position: relative;
  z-index: 3;
}

.is-readonly { background:#f7f7f7; cursor:not-allowed; }

/* Evita recortes */
/* �o. TIMELINE ICONS - checkbox consistente en lista + swiper */
#TimelineStageIconsConfig_popup .tlIconItem{
  position: relative;
  overflow: visible !important;
}

#TimelineStageIconsConfig_popup .checkbox-label.tl-checkbox-sm{
  position: absolute !important;
  top: -2px !important;
  left: -10px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  border: 2px solid #ff2d8d !important;
  background: rgba(255,255,255,.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
  transform: none !important;
}

#TimelineStageIconsConfig_popup .checkbox-label.tl-checkbox-sm .checkmark{
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* �o. cuando está seleccionado: relleno completo */
#TimelineStageIconsConfig_popup input.select-image-checkbox:checked + .checkbox-label.tl-checkbox-sm{
  background: #ff2d8d !important;
  border-color: #ff2d8d !important;
}

#TimelineStageIconsConfig_popup input.select-image-checkbox:checked + .checkbox-label.tl-checkbox-sm .checkmark::after{
  content: '\2713';
  color: #fff;
  font-size: 15px;
  line-height: 1;
  position: static !important;
}


#Timeline_section{
    padding-left: 10px;
    padding-right: 10px;
}

#TimelineStyleManager_panel {
  float: none !important;
  width: 100% !important;
  clear: both;
  margin: 0 0 12px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#TimelineStyleManager_panel .bo-tl-style-card {
  border: 1px solid #dde5f1;
  background: #f7fafd;
  border-radius: 14px;
  padding: 10px 10px 12px;
  box-shadow: 0 6px 16px rgba(32, 56, 86, 0.08);
}

#TimelineStyleManager_panel .bo-tl-style-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  background: #eaf0f7;
  border-radius: 12px;
  padding: 4px;
}

#TimelineStyleManager_panel .bo-tl-style-tab {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #556178;
  font-size: 15px;
  font-weight: 600;
  min-height: 36px;
  line-height: 1;
  transition: all .16s ease;
}

#TimelineStyleManager_panel .bo-tl-style-tab.active {
  background: #fff;
  color: #08a7c8;
  box-shadow: 0 4px 12px rgba(8, 167, 200, 0.16);
}

#TimelineStyleManager_panel .bo-tl-style-options {
  display: block;
}

#TimelineStyleManager_panel .bo-tl-style-options-label {
  display: block;
  margin: 0 0 7px;
  color: #8f9db1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

#TimelineStyleManager_panel .bo-tl-style-options-select {
  border-radius: 11px;
  border-color: #d2dbe8;
  color: #3f4e66;
  font-weight: 600;
  min-height: 40px;
  background-color: #fff;
  cursor: pointer;
  appearance: auto;
}

@media (max-width: 767px) {
  #TimelineStyleManager_panel .bo-tl-style-card {
    padding: 8px 8px 10px;
    border-radius: 12px;
  }

  #TimelineStyleManager_panel .bo-tl-style-segments {
    gap: 4px;
    border-radius: 10px;
    padding: 3px;
  }

  #TimelineStyleManager_panel .bo-tl-style-tab {
    min-height: 34px;
    font-size: 14px;
  }

  #TimelineStyleManager_panel .bo-tl-style-options-label {
    margin-bottom: 5px;
    font-size: 10px;
  }

  #TimelineStyleManager_panel .bo-tl-style-options-select {
    min-height: 38px;
  }
}

#DesignsRail .design-pill .icon-btn.active {
  background-color:#e7fffc; 
  border-color: #0c8477;
  /* background-color: #ffeaf7;
    border-color: #ce3892; */
}

/* Botones Aceptar/Cancelar en popups selectores de imagen */
#generalBackgroundImageConfig_popup .popup-footer,
#DecorationImagesConfig_popup .popup-footer,
#FrameImagesConfig_popup .popup-footer,
#IconTitleConfig_popup .popup-footer,
#GiftImageConfig_popup .popup-footer,
#DressCodeImageConfig_popup .popup-footer,
#TimelineStageIconsConfig_popup .popup-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 8px;
}

#generalBackgroundImageConfig_popup .popup-footer > div,
#DecorationImagesConfig_popup .popup-footer > div,
#FrameImagesConfig_popup .popup-footer > div,
#IconTitleConfig_popup .popup-footer > div,
#GiftImageConfig_popup .popup-footer > div,
#DressCodeImageConfig_popup .popup-footer > div,
#TimelineStageIconsConfig_popup .popup-footer > div {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding-left: 0;
  padding-right: 0;
}

#generalBackgroundImageConfig_popup .popup-footer .accept_button,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button,
#DecorationImagesConfig_popup .popup-footer .accept_button,
#DecorationImagesConfig_popup .popup-footer .cancel_button,
#FrameImagesConfig_popup .popup-footer .accept_button,
#FrameImagesConfig_popup .popup-footer .cancel_button,
#IconTitleConfig_popup .popup-footer .accept_button,
#IconTitleConfig_popup .popup-footer .cancel_button,
#GiftImageConfig_popup .popup-footer .accept_button,
#GiftImageConfig_popup .popup-footer .cancel_button,
#DressCodeImageConfig_popup .popup-footer .accept_button,
#DressCodeImageConfig_popup .popup-footer .cancel_button,
#TimelineStageIconsConfig_popup .popup-footer .accept_button,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button {
  --bo-popup-action-bg: #f3e6ec;
  --bo-popup-action-border: #ecd8df;
  --bo-popup-action-text: #ea4f78;
  --bo-popup-action-bg-hover: #f1e2e8;
  --bo-popup-action-text-hover: #e54772;
  --bo-popup-action-border-hover: #e7ccd7;
  min-width: 136px;
  min-height: 44px;
  border-radius: 999px !important;
  border: 1px solid var(--bo-popup-action-border) !important;
  background: var(--bo-popup-action-bg) !important;
  background-image: none !important;
  color: var(--bo-popup-action-text) !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  box-shadow: none !important;
  padding: 0 18px !important;
}

#generalBackgroundImageConfig_popup .popup-footer .accept_button,
#DecorationImagesConfig_popup .popup-footer .accept_button,
#FrameImagesConfig_popup .popup-footer .accept_button,
#IconTitleConfig_popup .popup-footer .accept_button,
#GiftImageConfig_popup .popup-footer .accept_button,
#DressCodeImageConfig_popup .popup-footer .accept_button,
#TimelineStageIconsConfig_popup .popup-footer .accept_button {
  --bo-popup-action-bg: #f4e0e8;
  --bo-popup-action-border: #ebd0db;
  --bo-popup-action-text: #e74877;
  --bo-popup-action-bg-hover: #f1dbe4;
  --bo-popup-action-text-hover: #e23f70;
  --bo-popup-action-border-hover: #e5c5d3;
}

#generalBackgroundImageConfig_popup .popup-footer .cancel_button,
#DecorationImagesConfig_popup .popup-footer .cancel_button,
#FrameImagesConfig_popup .popup-footer .cancel_button,
#IconTitleConfig_popup .popup-footer .cancel_button,
#GiftImageConfig_popup .popup-footer .cancel_button,
#DressCodeImageConfig_popup .popup-footer .cancel_button,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button {
  --bo-popup-action-bg: #f1eceb;
  --bo-popup-action-border: #e8dedd;
  --bo-popup-action-text: #e1564b;
  --bo-popup-action-bg-hover: #eee7e6;
  --bo-popup-action-text-hover: #dc4b40;
  --bo-popup-action-border-hover: #e2d3d1;
}

#generalBackgroundImageConfig_popup .popup-footer .accept_button b,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button b,
#DecorationImagesConfig_popup .popup-footer .accept_button b,
#DecorationImagesConfig_popup .popup-footer .cancel_button b,
#FrameImagesConfig_popup .popup-footer .accept_button b,
#FrameImagesConfig_popup .popup-footer .cancel_button b,
#IconTitleConfig_popup .popup-footer .accept_button b,
#IconTitleConfig_popup .popup-footer .cancel_button b,
#GiftImageConfig_popup .popup-footer .accept_button b,
#GiftImageConfig_popup .popup-footer .cancel_button b,
#DressCodeImageConfig_popup .popup-footer .accept_button b,
#DressCodeImageConfig_popup .popup-footer .cancel_button b,
#TimelineStageIconsConfig_popup .popup-footer .accept_button b,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button b {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#generalBackgroundImageConfig_popup .popup-footer .accept_button i,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button i,
#DecorationImagesConfig_popup .popup-footer .accept_button i,
#DecorationImagesConfig_popup .popup-footer .cancel_button i,
#FrameImagesConfig_popup .popup-footer .accept_button i,
#FrameImagesConfig_popup .popup-footer .cancel_button i,
#IconTitleConfig_popup .popup-footer .accept_button i,
#IconTitleConfig_popup .popup-footer .cancel_button i,
#GiftImageConfig_popup .popup-footer .accept_button i,
#GiftImageConfig_popup .popup-footer .cancel_button i,
#DressCodeImageConfig_popup .popup-footer .accept_button i,
#DressCodeImageConfig_popup .popup-footer .cancel_button i,
#TimelineStageIconsConfig_popup .popup-footer .accept_button i,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button i {
  color: var(--bo-popup-action-text) !important;
  font-size: 13px !important;
  line-height: 1;
}

#generalBackgroundImageConfig_popup .popup-footer .accept_button:hover,
#generalBackgroundImageConfig_popup .popup-footer .accept_button:focus,
#generalBackgroundImageConfig_popup .popup-footer .accept_button:active,
#generalBackgroundImageConfig_popup .popup-footer .accept_button:visited,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button:hover,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button:focus,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button:active,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button:visited,
#DecorationImagesConfig_popup .popup-footer .accept_button:hover,
#DecorationImagesConfig_popup .popup-footer .accept_button:focus,
#DecorationImagesConfig_popup .popup-footer .accept_button:active,
#DecorationImagesConfig_popup .popup-footer .accept_button:visited,
#DecorationImagesConfig_popup .popup-footer .cancel_button:hover,
#DecorationImagesConfig_popup .popup-footer .cancel_button:focus,
#DecorationImagesConfig_popup .popup-footer .cancel_button:active,
#DecorationImagesConfig_popup .popup-footer .cancel_button:visited,
#FrameImagesConfig_popup .popup-footer .accept_button:hover,
#FrameImagesConfig_popup .popup-footer .accept_button:focus,
#FrameImagesConfig_popup .popup-footer .accept_button:active,
#FrameImagesConfig_popup .popup-footer .accept_button:visited,
#FrameImagesConfig_popup .popup-footer .cancel_button:hover,
#FrameImagesConfig_popup .popup-footer .cancel_button:focus,
#FrameImagesConfig_popup .popup-footer .cancel_button:active,
#FrameImagesConfig_popup .popup-footer .cancel_button:visited,
#IconTitleConfig_popup .popup-footer .accept_button:hover,
#IconTitleConfig_popup .popup-footer .accept_button:focus,
#IconTitleConfig_popup .popup-footer .accept_button:active,
#IconTitleConfig_popup .popup-footer .accept_button:visited,
#IconTitleConfig_popup .popup-footer .cancel_button:hover,
#IconTitleConfig_popup .popup-footer .cancel_button:focus,
#IconTitleConfig_popup .popup-footer .cancel_button:active,
#IconTitleConfig_popup .popup-footer .cancel_button:visited,
#GiftImageConfig_popup .popup-footer .accept_button:hover,
#GiftImageConfig_popup .popup-footer .accept_button:focus,
#GiftImageConfig_popup .popup-footer .accept_button:active,
#GiftImageConfig_popup .popup-footer .accept_button:visited,
#GiftImageConfig_popup .popup-footer .cancel_button:hover,
#GiftImageConfig_popup .popup-footer .cancel_button:focus,
#GiftImageConfig_popup .popup-footer .cancel_button:active,
#GiftImageConfig_popup .popup-footer .cancel_button:visited,
#DressCodeImageConfig_popup .popup-footer .accept_button:hover,
#DressCodeImageConfig_popup .popup-footer .accept_button:focus,
#DressCodeImageConfig_popup .popup-footer .accept_button:active,
#DressCodeImageConfig_popup .popup-footer .accept_button:visited,
#DressCodeImageConfig_popup .popup-footer .cancel_button:hover,
#DressCodeImageConfig_popup .popup-footer .cancel_button:focus,
#DressCodeImageConfig_popup .popup-footer .cancel_button:active,
#DressCodeImageConfig_popup .popup-footer .cancel_button:visited,
#TimelineStageIconsConfig_popup .popup-footer .accept_button:hover,
#TimelineStageIconsConfig_popup .popup-footer .accept_button:focus,
#TimelineStageIconsConfig_popup .popup-footer .accept_button:active,
#TimelineStageIconsConfig_popup .popup-footer .accept_button:visited,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button:hover {
  background: var(--bo-popup-action-bg-hover) !important;
  color: var(--bo-popup-action-text-hover) !important;
  border-color: var(--bo-popup-action-border-hover) !important;
  text-decoration: none !important;
  outline: 0 !important;
}

#TimelineStageIconsConfig_popup .popup-footer .cancel_button:focus,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button:active,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button:visited {
  background: var(--bo-popup-action-bg-hover) !important;
  color: var(--bo-popup-action-text-hover) !important;
  border-color: var(--bo-popup-action-border-hover) !important;
  text-decoration: none !important;
  outline: 0 !important;
}

#generalBackgroundImageConfig_popup .popup-footer .accept_button:hover i,
#generalBackgroundImageConfig_popup .popup-footer .accept_button:focus i,
#generalBackgroundImageConfig_popup .popup-footer .accept_button:active i,
#generalBackgroundImageConfig_popup .popup-footer .accept_button:visited i,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button:hover i,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button:focus i,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button:active i,
#generalBackgroundImageConfig_popup .popup-footer .cancel_button:visited i,
#DecorationImagesConfig_popup .popup-footer .accept_button:hover i,
#DecorationImagesConfig_popup .popup-footer .accept_button:focus i,
#DecorationImagesConfig_popup .popup-footer .accept_button:active i,
#DecorationImagesConfig_popup .popup-footer .accept_button:visited i,
#DecorationImagesConfig_popup .popup-footer .cancel_button:hover i,
#DecorationImagesConfig_popup .popup-footer .cancel_button:focus i,
#DecorationImagesConfig_popup .popup-footer .cancel_button:active i,
#DecorationImagesConfig_popup .popup-footer .cancel_button:visited i,
#FrameImagesConfig_popup .popup-footer .accept_button:hover i,
#FrameImagesConfig_popup .popup-footer .accept_button:focus i,
#FrameImagesConfig_popup .popup-footer .accept_button:active i,
#FrameImagesConfig_popup .popup-footer .accept_button:visited i,
#FrameImagesConfig_popup .popup-footer .cancel_button:hover i,
#FrameImagesConfig_popup .popup-footer .cancel_button:focus i,
#FrameImagesConfig_popup .popup-footer .cancel_button:active i,
#FrameImagesConfig_popup .popup-footer .cancel_button:visited i,
#IconTitleConfig_popup .popup-footer .accept_button:hover i,
#IconTitleConfig_popup .popup-footer .accept_button:focus i,
#IconTitleConfig_popup .popup-footer .accept_button:active i,
#IconTitleConfig_popup .popup-footer .accept_button:visited i,
#IconTitleConfig_popup .popup-footer .cancel_button:hover i,
#IconTitleConfig_popup .popup-footer .cancel_button:focus i,
#IconTitleConfig_popup .popup-footer .cancel_button:active i,
#IconTitleConfig_popup .popup-footer .cancel_button:visited i,
#GiftImageConfig_popup .popup-footer .accept_button:hover i,
#GiftImageConfig_popup .popup-footer .accept_button:focus i,
#GiftImageConfig_popup .popup-footer .accept_button:active i,
#GiftImageConfig_popup .popup-footer .accept_button:visited i,
#GiftImageConfig_popup .popup-footer .cancel_button:hover i,
#GiftImageConfig_popup .popup-footer .cancel_button:focus i,
#GiftImageConfig_popup .popup-footer .cancel_button:active i,
#GiftImageConfig_popup .popup-footer .cancel_button:visited i,
#DressCodeImageConfig_popup .popup-footer .accept_button:hover i,
#DressCodeImageConfig_popup .popup-footer .accept_button:focus i,
#DressCodeImageConfig_popup .popup-footer .accept_button:active i,
#DressCodeImageConfig_popup .popup-footer .accept_button:visited i,
#DressCodeImageConfig_popup .popup-footer .cancel_button:hover i,
#DressCodeImageConfig_popup .popup-footer .cancel_button:focus i,
#DressCodeImageConfig_popup .popup-footer .cancel_button:active i,
#DressCodeImageConfig_popup .popup-footer .cancel_button:visited i,
#TimelineStageIconsConfig_popup .popup-footer .accept_button:hover i,
#TimelineStageIconsConfig_popup .popup-footer .accept_button:focus i,
#TimelineStageIconsConfig_popup .popup-footer .accept_button:active i,
#TimelineStageIconsConfig_popup .popup-footer .accept_button:visited i,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button:hover i,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button:focus i,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button:active i,
#TimelineStageIconsConfig_popup .popup-footer .cancel_button:visited i {
  color: var(--bo-popup-action-text-hover) !important;
}


/* =========================================
   TABLET (>= 768px)
   ========================================= */
@media (min-width: 768px) {
  /* ajustes tablet */
}

/* =========================================
   SOBREMESA / LAPTOP (>= 1024px)
   ========================================= */
@media (min-width: 1024px) {
  /* ajustes sobremesa */
}

/* =========================================
   SOBREMESA GRANDE (>= 1280px) [opcional]
   ========================================= */
@media (min-width: 1280px) {
  /* ajustes pantallas grandes */

  #TemplatePreviewMobile_modal[data-device="laptop"] .tpv-phone{
    aspect-ratio: 1.7 !important;
    top: -87px !important;
  }

  #TemplatePreviewMobile_modal[data-device="laptop"] .tpv-app{
    top: 4.7% !important;
    right: 21.1% !important;
    bottom: 34% !important;
    left: 21.2% !important;
  }


 #TemplatePreviewMobile_modal[data-device="desktop"] .tpv-phone{
    aspect-ratio: 1.9 !important;
    top: -87px !important;
  }

    #TemplatePreviewMobile_modal[data-device="desktop"] .tpv-app{
    top: 3.1% !important;
    right: 19.6% !important;
    bottom: 34% !important;
    left: 19.5% !important;
  }

   #TemplatePreviewMobile_modal[data-device="tablet"] .tpv-phone{
    aspect-ratio: 1.2 !important;
    top: -87px !important;
  }

    #TemplatePreviewMobile_modal[data-device="tablet"] .tpv-app{
    top: -8% !important;
    right: 14.5% !important;
    bottom: -13% !important;
    left: 14.1% !important;
  }

    #TemplatePreviewMobile_modal[data-device="mobile"] .tpv-phone{
    aspect-ratio: 1.2 !important;
    top: -87px !important;
  }

    #TemplatePreviewMobile_modal[data-device="mobile"] .tpv-app{
    top: 4.5% !important;
    right: 12.5% !important;
    bottom: 4% !important;
    left: 12.1% !important;
  }

}

/* =========================================
   2K / 4K (>= 1536px) [opcional]
   ========================================= */
@media (min-width: 1536px) {
  /* ajustes muy grandes */
}

/* RSVP Email targets (select2 multiple) */
#RSVPEmail_channel_checkbox {
  margin-bottom: 2px !important;
}

#RSVPEmail_target_wrapper {
  margin-top: 0 !important;
}

#RSVPEmail_target_wrapper .select2-container {
  display: block !important;
  width: 100% !important;
}

#RSVPEmail_target_wrapper .select2-selection--multiple {
  min-height: 38px !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#RSVPEmail_target_wrapper .select2-selection--multiple .select2-selection__rendered {
  min-height: 34px !important;
  padding: 2px 0 4px 0 !important;
}

#RSVPEmail_target_wrapper .select2-selection--multiple .select2-search--inline:first-child:last-child {
  width: 100% !important;
}

#RSVPEmail_target_wrapper .select2-selection--multiple .select2-search--inline {
  width: 100% !important;
}

#RSVPEmail_target_wrapper .select2-selection--multiple .select2-search--inline .select2-search__field {
  min-height: 24px;
  line-height: 24px;
  width: 100% !important;
}

#RSVPEmail_target_wrapper .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
  color: #9e9e9e;
  opacity: 1;
}

/* Add content popup */
#AddContent_popup .bo-addcontent-section-title {
  margin-top: 10px;
  margin-bottom: 8px;
}

#AddContent_popup .bo-addcontent-section-title .popup-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

#AddContent_popup .bo-addcontent-section-title .popup-title {
  font-size: 20px;
  font-weight: 700;
  color: #22324a;
}

#AddContent_popup .bo-addcontent-grid {
  margin-bottom: 12px;
}

#AddContent_popup .bo-addcontent-option {
  border-right: 1px solid rgba(32, 44, 66, 0.12);
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  border-radius: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
}

#AddContent_popup .bo-addcontent-option:last-child {
  border-right: 0;
}

#AddContent_popup .bo-addcontent-option:hover {
  background: rgba(255, 239, 248, 0.65);
  box-shadow: inset 0 0 0 1px rgba(237, 119, 204, 0.28);
  transform: translateY(-1px);
}

#AddContent_popup .bo-addcontent-option p {
  margin: 6px 0 2px;
  font-weight: 600;
  color: #2a3651;
}

/* Added custom field block */
#template-content .bo-custom-field {
  position: absolute;
  display: inline-block;
  min-width: 220px;
  max-width: min(92vw, 380px);
  width: min(92vw, 340px);
  padding: 12px;
  border: 1px dashed rgba(237, 119, 204, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 16px rgba(22, 31, 49, 0.09);
  z-index: 3;
}

#template-content .bo-custom-field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #2f3d57;
  margin-bottom: 8px;
}

#template-content .bo-custom-field-required {
  color: #d63968;
  margin-left: 2px;
}

#template-content .bo-custom-field-input,
#template-content .bo-custom-field-textarea {
  width: 100%;
  border: 1px solid #d7dce7;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  color: #2f3d57;
  background: #fff;
}

#template-content .bo-custom-field-textarea {
  min-height: 84px;
  resize: vertical;
}

#AddFieldContent_popup .popup-content {
  max-width: 560px;
}

._omx_8ed8785826{--omx:"4533aa9b6cdd"}

/* © 2026 Jesús Ortega Mateu (DNI 74379222M) — Licencia reservada / Propiedad intelectual. Prohibida reproducción/copia. Build 2026-03-08_010400 | File 8ed8785826 | Sig 4533aa9b6cdd | assets/css/invitationManager.css */
/*@omx eyJhbGciOiJITUFDLVNIQTI1NiIsInBheWxvYWQiOnsib3duZXIiOiJKZXPDunMgT3J0ZWdhIE1hdGV1IiwiZG5pIjoiNzQzNzkyMjJNIiwibGljZW5zZSI6IkxpY2VuY2lhIHJlc2VydmFkYSAvIFByb3BpZWRhZCBpbnRlbGVjdHVhbCIsIm9yaWdpbiI6Ik9NXzc0Mzc5MjIyTSIsImJ1aWxkIjoiMjAyNi0wMy0wOF8wMTA0MDAiLCJmaWxlIjoiOGVkODc4NTgyNiIsInBhdGgiOiJhc3NldHMvY3NzL2ludml0YXRpb25NYW5hZ2VyLmNzcyJ9LCJzaWciOiI0NTMzYWE5YjZjZGRmM2ZlMjkyYzM3MTkyNDljMTkwN2RkMGZlYmNiOTQwOGNhNDc4ZTcxNzYxMTYzMGY0ZjA0In0=*/