/**
 * JETSURF Experience Manager
 * Amelia Frontend Styling
 * Version 1.9.7-rc "Experience Map Partners"
 */

#amelia-container {
    --jem-yellow: #FFFF33;
    --jem-black: #000000;
    --jem-radius: 8px;
    --jem-muted: rgba(0, 0, 0, 0.70);
}

#amelia-container .am-fcil__filter-item[aria-label="Suche"],
#amelia-container .am-fcil__filter-item[aria-label="Nach Mitarbeiter filtern"],
#amelia-container .am-fcil__item-badge.am-service,
#amelia-container .am-fcis__badge.am-service,
#amelia-container button.jem-hide-employee-button,
#amelia-container .jem-hide-catalog-heading,
#amelia-container .jem-hide-detail-tab {
    display: none !important;
}

#amelia-container .am-button--filled.am-button--primary {
    background: var(--jem-yellow) !important;
    border-color: var(--jem-yellow) !important;
    color: var(--jem-black) !important;
}

#amelia-container .am-button--filled.am-button--primary .am-button__inner {
    color: var(--jem-black) !important;
}

#amelia-container .am-fcis__info-tab__wrapper {
    gap: 8px !important;
}

#amelia-container .am-fcis__info-tab {
    color: var(--jem-black) !important;
    border-radius: var(--jem-radius) !important;
    padding: 8px 12px !important;
}

#amelia-container .am-fcis__info-tab.am-active {
    background: var(--jem-yellow) !important;
    color: var(--jem-black) !important;
    font-weight: 700 !important;
}

#amelia-container .am-heading-prev,
.jem-amelia-dialog .am-heading-prev,
#amelia-container .am-button-group button[aria-label="previous month"],
#amelia-container .am-button-group button[aria-label="next month"],
.jem-amelia-dialog .am-button-group button[aria-label="previous month"],
.jem-amelia-dialog .am-button-group button[aria-label="next month"] {
    background: var(--jem-black, #000000) !important;
    border: none !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

#amelia-container .am-heading-prev span,
#amelia-container .am-heading-prev .am-icon-arrow-left,
.jem-amelia-dialog .am-heading-prev span,
.jem-amelia-dialog .am-heading-prev .am-icon-arrow-left,
#amelia-container .am-button-group button[aria-label="previous month"] span,
#amelia-container .am-button-group button[aria-label="next month"] span,
.jem-amelia-dialog .am-button-group button[aria-label="previous month"] span,
.jem-amelia-dialog .am-button-group button[aria-label="next month"] span,
#amelia-container .am-button-group .am-icon-arrow-left,
#amelia-container .am-button-group .am-icon-arrow-right,
.jem-amelia-dialog .am-button-group .am-icon-arrow-left,
.jem-amelia-dialog .am-button-group .am-icon-arrow-right {
    color: var(--jem-yellow, #FFFF33) !important;
}

#amelia-container .am-heading-prev:hover,
.jem-amelia-dialog .am-heading-prev:hover,
#amelia-container .am-button-group button[aria-label="previous month"]:hover,
#amelia-container .am-button-group button[aria-label="next month"]:hover,
.jem-amelia-dialog .am-button-group button[aria-label="previous month"]:hover,
.jem-amelia-dialog .am-button-group button[aria-label="next month"]:hover {
    background: #222222 !important;
}

#amelia-container [class*="main-heading"] {
    --am-c-main-heading-text-op15: rgba(0, 0, 0, 0.15) !important;
}

#amelia-container [class*="main-heading"]::before,
#amelia-container [class*="main-heading"]::after,
.jem-amelia-dialog [class*="main-heading"]::before,
.jem-amelia-dialog [class*="main-heading"]::after {
    background-color: var(--jem-yellow, #FFFF33) !important;
}

#amelia-container .jem-gross-price {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

#amelia-container .jem-gross-price::before {
    content: attr(data-gross-main);
    display: block !important;
    color: var(--jem-black) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

#amelia-container .jem-gross-price::after {
    content: attr(data-gross-tax-label);
    display: block !important;
    color: var(--jem-black) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    opacity: 0.85 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
}

#amelia-container .am-fcil__item-cost .am-fcil__item-price.jem-gross-price {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: var(--jem-yellow) !important;
    border-color: var(--jem-yellow) !important;
    border-radius: var(--jem-radius) !important;
    padding: 8px 12px !important;
}

#amelia-container .am-fcis__header-price.jem-gross-price {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

#amelia-container .am-fs__payments-app-info-total,
#amelia-container .am-fs__payments-app-info-total span,
#amelia-container .am-fs__payments-app-info-total .am-amount {
    color: var(--jem-black) !important;
}

#amelia-container .am-fs__payments-app-info-total .am-amount.jem-payment-original-hidden {
    display: none !important;
}

#amelia-container .jem-total-gross {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    color: var(--jem-black) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

#amelia-container .jem-total-gross-main {
    color: var(--jem-black) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

#amelia-container .jem-total-gross-tax {
    color: var(--jem-black) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
    margin-top: 2px !important;
}

#amelia-container .jem-net-row,
#amelia-container .jem-tax-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: var(--jem-black) !important;
    font-weight: 500 !important;
    padding: 6px 0 !important;
    border: 0 !important;
}

#amelia-container .jem-net-row span,
#amelia-container .jem-tax-row span {
    color: var(--jem-black) !important;
}

#amelia-container .jem-net-row .jem-net-amount,
#amelia-container .jem-tax-row .jem-tax-amount {
    font-weight: 700 !important;
}

#amelia-container .jem-hidden {
    display: none !important;
}

.jem-amelia-dialog .el-dialog__headerbtn,
#amelia-container .el-dialog__headerbtn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: var(--jem-black, #000000) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.jem-amelia-dialog .el-dialog__headerbtn .el-dialog__close,
.jem-amelia-dialog .el-dialog__headerbtn .am-icon-close,
.jem-amelia-dialog .el-dialog__headerbtn .am-icon-close::before,
.jem-amelia-dialog .el-dialog__headerbtn .am-icon-close:before {
    color: var(--jem-yellow, #FFFF33) !important;
}

.jem-amelia-dialog .el-dialog__headerbtn:hover {
    background: #222222 !important;
}




/* 1.5 Experience Accent Bar */
#amelia-container .am-fcil__item.jem-experience-accent-ready,
#amelia-container .am-fcil__item-card.jem-experience-accent-ready,
#amelia-container [class*="am-fcil__item"].jem-experience-accent-ready {
    position: relative !important;
    overflow: hidden !important;
}

#amelia-container .jem-experience-accent-bar {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 5px !important;
    background: var(--jem-yellow, #FFFF33) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}


/* 1.6.0 Companion Number Input
   Nur das Amelia-Zahlenfeld für "Jemanden mitbringen" wird mobil ohne sichtbaren Cursor dargestellt. */
@media (max-width: 768px) {
    #amelia-container input.el-input__inner[type="number"][role="spinbutton"][min="0"][max="1"],
    .jem-amelia-dialog input.el-input__inner[type="number"][role="spinbutton"][min="0"][max="1"] {
        caret-color: transparent !important;
    }
}


/* 1.6.2 Amelia Custom Field Checkbox CI Fix
   Nicht ausgewählt: weißes Kästchen mit schwarzem Rahmen.
   Ausgewählt: schwarzes Kästchen mit gelbem X (#FFFF33). */
#amelia-container .el-checkbox__inner,
.jem-amelia-dialog .el-checkbox__inner {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #000000 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}

#amelia-container .el-checkbox__inner::after,
.jem-amelia-dialog .el-checkbox__inner::after {
    content: "" !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -55%) scale(0) !important;
    color: #FFFF33 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    opacity: 0 !important;
    transition: opacity 0.12s ease, transform 0.12s ease !important;
}

#amelia-container .el-checkbox__input.is-checked .el-checkbox__inner,
.jem-amelia-dialog .el-checkbox__input.is-checked .el-checkbox__inner,
#amelia-container .el-checkbox.is-checked .el-checkbox__inner,
.jem-amelia-dialog .el-checkbox.is-checked .el-checkbox__inner {
    background: #000000 !important;
    border-color: #000000 !important;
}

#amelia-container .el-checkbox__input.is-checked .el-checkbox__inner::after,
.jem-amelia-dialog .el-checkbox__input.is-checked .el-checkbox__inner::after,
#amelia-container .el-checkbox.is-checked .el-checkbox__inner::after,
.jem-amelia-dialog .el-checkbox.is-checked .el-checkbox__inner::after {
    content: "✕" !important;
    opacity: 1 !important;
    transform: translate(-50%, -55%) scale(1) !important;
}

#amelia-container .el-checkbox__input.is-focus .el-checkbox__inner,
.jem-amelia-dialog .el-checkbox__input.is-focus .el-checkbox__inner,
#amelia-container .el-checkbox__input:hover .el-checkbox__inner,
.jem-amelia-dialog .el-checkbox__input:hover .el-checkbox__inner {
    border-color: #000000 !important;
}

#amelia-container .el-checkbox__label,
.jem-amelia-dialog .el-checkbox__label {
    color: #1a2c37 !important;
    line-height: 1.4 !important;
}


/* 1.6.3 Extras Description Fix */
#amelia-container .am-fs__extras-card__content-main.ql-description .jem-hidden,
#amelia-container .am-fs__extras-card__content-main.ql-description p,
#amelia-container .am-fs__extras-card__content-main.ql-description span,
.jem-amelia-dialog .am-fs__extras-card__content-main.ql-description .jem-hidden,
.jem-amelia-dialog .am-fs__extras-card__content-main.ql-description p,
.jem-amelia-dialog .am-fs__extras-card__content-main.ql-description span {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #1a2c37 !important;
}


/* 1.7.6 Payment Summary Tax Fix
   Die MwSt.-Zeile in der Zahlungszusammenfassung ist ein echter Kostenbestandteil
   und darf nicht durch den MwSt-Badge-Hide-Fix ausgeblendet werden. */
#amelia-container .am-fs__payments-app-info-tax .jem-hidden,
.jem-amelia-dialog .am-fs__payments-app-info-tax .jem-hidden,
#amelia-container .am-fs__payments-app-info-tax span,
.jem-amelia-dialog .am-fs__payments-app-info-tax span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#amelia-container .am-fs__payments-app-info-tax,
.jem-amelia-dialog .am-fs__payments-app-info-tax {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* JEM 1.9.24 RC – Amelia dialog close button hardening
 * Amelia/Element Plus may teleport dialogs outside #amelia-container.
 * Target the actual dialog DOM with higher specificity so the CI close button
 * remains a black circle with a yellow (#FFFF33) X.
 */
body .jem-amelia-dialog .el-dialog__headerbtn,
body .jem-amelia-dialog .el-dialog__headerbtn,
body .jem-amelia-dialog .el-dialog__headerbtn,
body .jem-amelia-dialog button.el-dialog__headerbtn[aria-label="Close this dialog"] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #000000 !important;
    background-color: #000000 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

body .jem-amelia-dialog .el-dialog__headerbtn .el-dialog__close,
body .jem-amelia-dialog .el-dialog__headerbtn .am-icon-close,
body .jem-amelia-dialog .el-dialog__headerbtn .el-dialog__close,
body .jem-amelia-dialog .el-dialog__headerbtn .am-icon-close,
body .jem-amelia-dialog .el-dialog__headerbtn .el-dialog__close,
body .jem-amelia-dialog .el-dialog__headerbtn .am-icon-close,
body .jem-amelia-dialog button.el-dialog__headerbtn[aria-label="Close this dialog"] .el-dialog__close,
body .jem-amelia-dialog button.el-dialog__headerbtn[aria-label="Close this dialog"] .am-icon-close,
body .jem-amelia-dialog button.el-dialog__headerbtn[aria-label="Close this dialog"] .am-icon-close::before,
body .jem-amelia-dialog button.el-dialog__headerbtn[aria-label="Close this dialog"] .am-icon-close:before {
    color: #FFFF33 !important;
    background: transparent !important;
}

body .jem-amelia-dialog .el-dialog__headerbtn:hover,
body .jem-amelia-dialog .el-dialog__headerbtn:hover,
body .jem-amelia-dialog .el-dialog__headerbtn:hover,
body .jem-amelia-dialog button.el-dialog__headerbtn[aria-label="Close this dialog"]:hover {
    background: #222222 !important;
    background-color: #222222 !important;
}