/* Make Legacy Editor look like the New Portal in both embedded configurator and admin overlay */
#tepp-embedded-designer-root .bg-\[\#354357\]:not(button),
#tepp-designer-root .bg-\[\#354357\]:not(button),
#tepp-beta-designer-overlay .bg-\[\#354357\]:not(button) {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
/* Make top bar text slate */
#tepp-embedded-designer-root .bg-\[\#354357\]:not(button) .text-white,
#tepp-designer-root .bg-\[\#354357\]:not(button) .text-white,
#tepp-beta-designer-overlay .bg-\[\#354357\]:not(button) .text-white {
    color: #1e293b !important;
}
/* Hide the legacy logo and "Design Editor BETA" text only in obsolete h1 headers if present */
#tepp-embedded-designer-root .bg-\[\#354357\]:not(button) h1 > img,
#tepp-designer-root .bg-\[\#354357\]:not(button) h1 > img,
#tepp-beta-designer-overlay .bg-\[\#354357\]:not(button) h1 > img,
#tepp-embedded-designer-root .bg-\[\#354357\]:not(button) h1 > span,
#tepp-designer-root .bg-\[\#354357\]:not(button) h1 > span,
#tepp-beta-designer-overlay .bg-\[\#354357\]:not(button) h1 > span {
    display: none !important;
}
/* Header Logo - Display inline, scale for mobile, hide only on screens <= 360px to prevent squashing */
#tepp-embedded-designer-root .tepp-header-logo,
#tepp-designer-root .tepp-header-logo,
#tepp-beta-designer-overlay .tepp-header-logo,
#tepp-embedded-designer-root img[src*="logoebay"],
#tepp-designer-root img[src*="logoebay"],
#tepp-beta-designer-overlay img[src*="logoebay"],
.tepp-header-logo {
    display: block !important;
    height: 26px !important;
    max-height: 26px !important;
    width: auto !important;
    max-width: 95px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}
@media (min-width: 640px) {
    #tepp-embedded-designer-root .tepp-header-logo,
    #tepp-designer-root .tepp-header-logo,
    #tepp-beta-designer-overlay .tepp-header-logo,
    #tepp-embedded-designer-root img[src*="logoebay"],
    #tepp-designer-root img[src*="logoebay"],
    #tepp-beta-designer-overlay img[src*="logoebay"],
    .tepp-header-logo {
        height: 32px !important;
        max-height: 32px !important;
        max-width: 140px !important;
    }
}
@media (max-width: 360px) {
    #tepp-embedded-designer-root .tepp-header-logo,
    #tepp-designer-root .tepp-header-logo,
    #tepp-beta-designer-overlay .tepp-header-logo,
    #tepp-embedded-designer-root img[src*="logoebay"],
    #tepp-designer-root img[src*="logoebay"],
    #tepp-beta-designer-overlay img[src*="logoebay"],
    .tepp-header-logo {
        display: none !important;
    }
}
/* Ensure the "Cancel and return" X button (if any) fits the portal */
#tepp-embedded-designer-root button[title="Cancel and return"] svg,
#tepp-designer-root button[title="Cancel and return"] svg,
#tepp-beta-designer-overlay button[title="Cancel and return"] svg {
    stroke: #64748b !important;
}
/* Front/Back toggle capsule background */
#tepp-embedded-designer-root .bg-slate-900\/30,
#tepp-designer-root .bg-slate-900\/30,
#tepp-beta-designer-overlay .bg-slate-900\/30,
#tepp-embedded-designer-root .bg-gray-200,
#tepp-designer-root .bg-gray-200,
#tepp-beta-designer-overlay .bg-gray-200 {
    background-color: #f1f5f9 !important;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05) !important;
    border-radius: 0px !important;
}
/* Active Front/Back button */
#tepp-embedded-designer-root .bg-white.text-slate-900,
#tepp-designer-root .bg-white.text-slate-900,
#tepp-beta-designer-overlay .bg-white.text-slate-900,
#tepp-embedded-designer-root .bg-white.text-brand-600,
#tepp-designer-root .bg-white.text-brand-600,
#tepp-beta-designer-overlay .bg-white.text-brand-600 {
    background-color: #ffffff !important;
    color: #a2c653 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
    border-radius: 0px !important;
}
/* Inactive Front/Back button (scoped strictly to toggle group) */
#tepp-embedded-designer-root [role="group"] .text-slate-300,
#tepp-designer-root [role="group"] .text-slate-300,
#tepp-beta-designer-overlay [role="group"] .text-slate-300,
#tepp-embedded-designer-root [role="group"] .text-gray-500,
#tepp-designer-root [role="group"] .text-gray-500,
#tepp-beta-designer-overlay [role="group"] .text-gray-500 {
    color: #64748b !important;
    border-radius: 0px !important;
}

/* Mobile Bottom Navigation - Preserve smooth capsule shape and rounded button styling */
.tepp-mobile-bottom-nav,
#tepp-embedded-designer-root .tepp-mobile-bottom-nav,
#tepp-designer-root .tepp-mobile-bottom-nav,
#tepp-beta-designer-overlay .tepp-mobile-bottom-nav {
    border-radius: 9999px !important;
    overflow: hidden !important;
}

.tepp-mobile-bottom-nav button,
#tepp-embedded-designer-root .tepp-mobile-bottom-nav button,
#tepp-designer-root .tepp-mobile-bottom-nav button,
#tepp-beta-designer-overlay .tepp-mobile-bottom-nav button {
    border-radius: 9999px !important;
    background-color: transparent !important;
    color: #cbd5e1 !important;
}

.tepp-mobile-bottom-nav button.tepp-mobile-nav-active,
#tepp-embedded-designer-root .tepp-mobile-bottom-nav button.tepp-mobile-nav-active,
#tepp-designer-root .tepp-mobile-bottom-nav button.tepp-mobile-nav-active,
#tepp-beta-designer-overlay .tepp-mobile-bottom-nav button.tepp-mobile-nav-active {
    background-color: #334155 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
}

.tepp-mobile-bottom-nav button:hover,
#tepp-embedded-designer-root .tepp-mobile-bottom-nav button:hover,
#tepp-designer-root .tepp-mobile-bottom-nav button:hover,
#tepp-beta-designer-overlay .tepp-mobile-bottom-nav button:hover {
    color: #ffffff !important;
}

/* Ensure BOTH main header buttons have rectangle shapes in all states */
#tepp-embedded-designer-root button.px-2.md\:px-6,
#tepp-designer-root button.px-2.md\:px-6,
#tepp-beta-designer-overlay button.px-2.md\:px-6 {
    border-radius: 0px !important;
}

/* Save & Continue Button - Refined Brand Green Rectangle */
#tepp-embedded-designer-root button:not([disabled]).tepp-save-continue-btn,
#tepp-designer-root button:not([disabled]).tepp-save-continue-btn,
#tepp-beta-designer-overlay button:not([disabled]).tepp-save-continue-btn,
#tepp-embedded-designer-root button.bg-\[\#354357\],
#tepp-designer-root button.bg-\[\#354357\],
#tepp-beta-designer-overlay button.bg-\[\#354357\],
#tepp-embedded-designer-root button.bg-\[\#a2c653\],
#tepp-designer-root button.bg-\[\#a2c653\],
#tepp-beta-designer-overlay button.bg-\[\#a2c653\] {
    background-color: #a2c653 !important;
    color: white !important;
    border-radius: 0px !important;
    font-weight: 700 !important;
    border: none !important;
}
@media (min-width: 768px) {
    #tepp-embedded-designer-root button.tepp-save-continue-btn,
    #tepp-designer-root button.tepp-save-continue-btn,
    #tepp-beta-designer-overlay button.tepp-save-continue-btn,
    #tepp-embedded-designer-root button.bg-\[\#354357\],
    #tepp-designer-root button.bg-\[\#354357\],
    #tepp-beta-designer-overlay button.bg-\[\#354357\],
    #tepp-embedded-designer-root button.bg-\[\#a2c653\],
    #tepp-designer-root button.bg-\[\#a2c653\],
    #tepp-beta-designer-overlay button.bg-\[\#a2c653\] {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
@media (max-width: 767px) {
    #tepp-embedded-designer-root button.tepp-save-continue-btn,
    #tepp-designer-root button.tepp-save-continue-btn,
    #tepp-beta-designer-overlay button.tepp-save-continue-btn,
    #tepp-embedded-designer-root button.bg-\[\#354357\],
    #tepp-designer-root button.bg-\[\#354357\],
    #tepp-beta-designer-overlay button.bg-\[\#354357\],
    #tepp-embedded-designer-root button.bg-\[\#a2c653\],
    #tepp-designer-root button.bg-\[\#a2c653\],
    #tepp-beta-designer-overlay button.bg-\[\#a2c653\] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}
#tepp-embedded-designer-root button:not([disabled]).tepp-save-continue-btn:hover,
#tepp-designer-root button:not([disabled]).tepp-save-continue-btn:hover,
#tepp-beta-designer-overlay button:not([disabled]).tepp-save-continue-btn:hover,
#tepp-embedded-designer-root button.hover\:bg-\[\#283242\]:hover,
#tepp-designer-root button.hover\:bg-\[\#283242\]:hover,
#tepp-beta-designer-overlay button.hover\:bg-\[\#283242\]:hover,
#tepp-embedded-designer-root button.hover\:bg-\[\#83a838\]:hover,
#tepp-designer-root button.hover\:bg-\[\#83a838\]:hover,
#tepp-beta-designer-overlay button.hover\:bg-\[\#83a838\]:hover {
    background-color: #83a838 !important;
    color: white !important;
}

/* Save Design for Later Button - Subtle Gray Rectangle */
#tepp-embedded-designer-root button:not([disabled]).tepp-save-later-btn,
#tepp-designer-root button:not([disabled]).tepp-save-later-btn,
#tepp-beta-designer-overlay button:not([disabled]).tepp-save-later-btn,
#tepp-embedded-designer-root button.px-2.md\:px-6.bg-slate-100,
#tepp-designer-root button.px-2.md\:px-6.bg-slate-100,
#tepp-beta-designer-overlay button.px-2.md\:px-6.bg-slate-100,
#tepp-embedded-designer-root button.px-2.md\:px-6.bg-\[\#f1f5f9\],
#tepp-designer-root button.px-2.md\:px-6.bg-\[\#f1f5f9\],
#tepp-beta-designer-overlay button.px-2.md\:px-6.bg-\[\#f1f5f9\] {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0px !important;
}
#tepp-embedded-designer-root button:not([disabled]).tepp-save-later-btn:hover,
#tepp-designer-root button:not([disabled]).tepp-save-later-btn:hover,
#tepp-beta-designer-overlay button:not([disabled]).tepp-save-later-btn:hover,
#tepp-embedded-designer-root button.px-2.md\:px-6.bg-slate-100:hover,
#tepp-designer-root button.px-2.md\:px-6.bg-slate-100:hover,
#tepp-beta-designer-overlay button.px-2.md\:px-6.bg-slate-100:hover,
#tepp-embedded-designer-root button.px-2.md\:px-6.bg-\[\#f1f5f9\]:hover,
#tepp-designer-root button.px-2.md\:px-6.bg-\[\#f1f5f9\]:hover,
#tepp-beta-designer-overlay button.px-2.md\:px-6.bg-\[\#f1f5f9\]:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

/* Enforce Rectangle (Not Rounded) on All Buttons across configurator and designer */
.tepp-configurator-modal button,
.tepp-configurator-app button,
#tepp-configurator-frontend-root button,
#tepp-card-configurator-root button,
#tepp-embedded-designer-root button,
#tepp-designer-root button,
#tepp-beta-designer-overlay button,
.tepp-configurator-trigger button,
#tepp-configurator-product-wrapper button,
.tepp-configurator-modal .btn,
.tepp-configurator-app .btn,
#tepp-configurator-frontend-root .btn,
#tepp-card-configurator-root .btn,
#tepp-embedded-designer-root .btn,
#tepp-designer-root .btn,
#tepp-beta-designer-overlay .btn,
.tepp-saved-button {
    border-radius: 0px !important;
}

#tepp-embedded-designer-root [role="group"],
#tepp-designer-root [role="group"],
#tepp-beta-designer-overlay [role="group"] {
    border-radius: 0px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px !important;
}
#tepp-embedded-designer-root [role="group"] button,
#tepp-designer-root [role="group"] button,
#tepp-beta-designer-overlay [role="group"] button {
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}
@media (max-width: 767px) {
    #tepp-embedded-designer-root [role="group"],
    #tepp-designer-root [role="group"],
    #tepp-beta-designer-overlay [role="group"] {
        height: 32px !important;
        padding: 3px !important;
    }
}
.tepp-configurator-modal [role="group"],
#tepp-configurator-frontend-root [role="group"],
#tepp-card-configurator-root [role="group"] {
    border-radius: 0px !important;
}

/* Remove the "X" button from the main configurator modal when embedded so we don't have 2 overlapping X buttons */
.tepp-embedded-active .tepp-configurator-close-btn {
    display: none !important;
}

/* Header Logo - Display inline, scale for mobile, hide only on screens <= 360px to prevent squashing */
.tepp-header-logo {
    display: block !important;
    height: 26px !important;
    max-height: 26px !important;
    width: auto !important;
    max-width: 95px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}
@media (min-width: 640px) {
    .tepp-header-logo {
        height: 32px !important;
        max-height: 32px !important;
        max-width: 140px !important;
    }
}
@media (max-width: 360px) {
    .tepp-header-logo {
        display: none !important;
    }
}

/* Mobile Canvas Touch Handling - Prevent browser gesture interception of object dragging */
#tepp-embedded-designer-root .upper-canvas,
#tepp-designer-root .upper-canvas,
#tepp-beta-designer-overlay .upper-canvas,
.canvas-container .upper-canvas,
canvas.upper-canvas {
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}