/*
 * ============================================================
 * Amelia Custom - myPOS Embedded Checkout
 * Stable native-button UI shell
 * ============================================================
 *
 * Important:
 * The secure myPOS card form is cross-origin. This stylesheet
 * controls the WordPress/Amelia shell around it, not the internal
 * myPOS DOM.
 */

.amelia-custom-mypos,
.amelia-custom-mypos * {
    box-sizing: border-box;
}

.amelia-custom-mypos,
.amelia-custom-mypos button,
.amelia-custom-mypos__toolbar,
.amelia-custom-mypos__status {
    font-family: 'Comfortaa', sans-serif !important;
}

.amelia-custom-mypos {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}

.amelia-custom-mypos__inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.amelia-custom-mypos__checkout {
    width: 100%;
    min-width: 320px;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
}

.amelia-custom-mypos__checkout > iframe {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.amelia-custom-mypos [hidden] {
    display: none !important;
}

.amelia-custom-mypos__status {
    width: 100%;
    margin: 0;
    padding: 42px 24px;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: #222;
}

/* Toolbar */
.amelia-custom-mypos__toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 66px;
    margin: 0;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.amelia-custom-mypos__nav {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-family: 'Comfortaa', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #111;
    cursor: pointer;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
}

.amelia-custom-mypos__back {
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background: #fff;
    color: #111;
}

.amelia-custom-mypos__back:hover,
.amelia-custom-mypos__back:focus,
.amelia-custom-mypos__back:active {
    border-color: #d9d9d9;
    background: #fff;
    color: #111;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}

.amelia-custom-mypos__back:focus-visible {
    outline: 2px solid rgba(34, 107, 107, 0.28);
    outline-offset: 2px;
}

.amelia-custom-mypos__chevron {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    overflow: visible;
}

.amelia-custom-mypos__chevron path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.amelia-custom-mypos__close {
    width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111;
}

.amelia-custom-mypos__close:hover,
.amelia-custom-mypos__close:focus,
.amelia-custom-mypos__close:active {
    border: 0;
    background: transparent;
    color: #111;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}

.amelia-custom-mypos__close:focus-visible {
    outline: 2px solid rgba(34, 107, 107, 0.28);
    outline-offset: 2px;
}

.amelia-custom-mypos__close-icon {
    display: block;
    width: 24px;
    height: 24px;
}

.amelia-custom-mypos__close-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Payment mode */
.el-dialog__body.amelia-mypos-payment-mode > *:not(.amelia-custom-mypos) {
    display: none !important;
}

.el-dialog__body.amelia-mypos-payment-mode > .amelia-custom-mypos {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

.el-dialog.amelia-mypos-payment-shell > .el-dialog__header,
.el-dialog.amelia-mypos-payment-shell > .el-dialog__footer {
    display: none !important;
}

.el-dialog.amelia-mypos-payment-shell > .el-dialog__body {
    margin: 0 !important;
    padding: 0 !important;
}

.el-dialog.amelia-mypos-payment-shell {
    width: 650px !important;
    max-width: calc(100vw - 32px) !important;
    overflow: hidden !important;
    background: #fff !important;
    border-radius: 24px !important;
}

.el-overlay.amelia-mypos-payment-overlay {
    background: rgba(0, 0, 0, 0.42) !important;
}

body.amelia-mypos-page-payment-mode {
    overflow: hidden !important;
    overscroll-behavior: none;
}


.amelia-custom-mypos__checkout[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    .el-dialog.amelia-mypos-payment-shell {
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .el-dialog.amelia-mypos-payment-shell > .el-dialog__body {
        min-height: 100dvh;
    }

    .amelia-custom-mypos__toolbar {
        min-height: 58px;
        padding: 8px 14px;
    }

    .amelia-custom-mypos__checkout {
        min-width: 0;
        width: 100%;
    }

    .amelia-custom-mypos__back {
        min-height: 38px;
        padding: 7px 12px 7px 10px;
    }

    .amelia-custom-mypos__close {
        width: 36px;
        height: 36px;
        min-height: 36px;
    }
}


/*
 * ============================================================
 * Final loading/background cleanup
 * ============================================================
 */

/*
 * Do not show myPOS's own iframe Loading screen. The iframe stays
 * mounted so it can initialize and resize normally, but our Bulgarian
 * status text is the only thing the customer sees until the form is ready.
 */
.amelia-custom-mypos__inner {
    position: relative;
}

.amelia-custom-mypos__checkout--loading {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.amelia-custom-mypos--loading-checkout .amelia-custom-mypos__inner {
    height: 500px;
    min-height: 500px;
}

.amelia-custom-mypos--loading-checkout .amelia-custom-mypos__status {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #fff;
}

/*
 * Amelia can turn the underlying events widget into skeletons as soon as
 * Reserve is pressed. Payment mode now starts visually in the same click turn,
 * so this widget is simply hidden before that skeleton animation can be seen.
 *
 * visibility:hidden preserves the page's layout and avoids the visual
 * skeleton animation without touching Amelia's booking flow.
 */
body.amelia-mypos-page-payment-mode
    .elementor-widget-ameliaeventslistbooking {
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 600px) {
    .amelia-custom-mypos--loading-checkout .amelia-custom-mypos__inner {
        height: calc(100dvh - 58px);
        min-height: calc(100dvh - 58px);
    }
}


/*
 * Performance note:
 * No persistent Amelia/Elementor hiding is used outside the active
 * payment modal. Closing or going Back immediately removes payment mode.
 */