/* ============================================================
   RC UI 3.0 — TOPBAR FINAL OWNER
   Brand | Side switch + History | Global actions
   ============================================================ */

body.rc-editor-open #rc-editor-modal{
    --rc-topbar-height-desktop:74px;
    --rc-topbar-height-tablet:64px;
    --rc-topbar-height-mobile:56px;
    --rc-topbar-height:var(--rc-topbar-height-desktop);
    --rc-smartbar-height:44px;
    --rc-active-smartbar-height:0px;
    --rc-editor-navigation-height:calc(var(--rc-topbar-height) + var(--rc-active-smartbar-height));
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet{
    --rc-topbar-height:var(--rc-topbar-height-tablet);
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile{
    --rc-topbar-height:var(--rc-topbar-height-mobile);
}

body.rc-editor-open #rc-editor-modal .rc-topbar{
    height:var(--rc-topbar-height) !important;
    min-height:var(--rc-topbar-height) !important;
    max-height:var(--rc-topbar-height) !important;
    display:grid !important;
    grid-template-columns:minmax(170px, 1fr) auto minmax(170px, 1fr) !important;
    align-items:center !important;
    gap:18px !important;
    padding:0 20px !important;
    overflow:hidden !important;
    border-bottom:1px solid var(--rc-border) !important;
    background:var(--rc-bg-topbar) !important;
    box-shadow:0 1px 3px rgba(15, 23, 42, .04) !important;
}

body.rc-editor-open #rc-editor-modal .rc-topbar-left{
    min-width:170px !important;
    display:flex !important;
    align-items:center !important;
}

body.rc-editor-open #rc-editor-modal .rc-topbar-left strong{
    color:var(--rc-text-primary) !important;
    font-size:16px !important;
    font-weight:750 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
}

/* RCSD TOPBAR BRAND LOGO V1
   Desktop brand replaces textual wordmark without changing shell geometry.
*/
body.rc-editor-open #rc-editor-modal .rc-topbar-brand{
    display:inline-flex !important;
    align-items:center !important;
    min-width:0 !important;
    line-height:1 !important;
}

body.rc-editor-open #rc-editor-modal .rc-brand-full{
    display:inline-flex;
    align-items:center;
}

body.rc-editor-open #rc-editor-modal .rc-brand-logo{
    display:block !important;

    width:auto !important;
    height:64px !important;
    max-width:195px !important;

    object-fit:contain !important;
    object-position:left center !important;

    border:0 !important;
    box-shadow:none !important;
}

body.rc-editor-open #rc-editor-modal .rc-brand-compact{
    display:none;
}

body.rc-editor-open #rc-editor-modal .rc-topbar-center{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:center !important;
    gap:10px !important;
    overflow:hidden !important;
}

body.rc-editor-open #rc-editor-modal .rc-side-switch,
body.rc-editor-open #rc-editor-modal .rc-history-controls{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
}

body.rc-editor-open #rc-editor-modal .rc-side-switch{
    gap:2px !important;
    padding:3px !important;
    border:1px solid var(--rc-border) !important;
    border-radius:var(--rc-radius-lg) !important;
    background:var(--rc-surface-2) !important;
}

body.rc-editor-open #rc-editor-modal .rc-side-switch[hidden]{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal .rc-side-switch button{
    min-width:58px !important;
    height:30px !important;
    padding:0 10px !important;
    border:0 !important;
    border-radius:var(--rc-radius-md) !important;
    background:transparent !important;
    color:var(--rc-text-secondary) !important;
    box-shadow:none !important;
    font-size:11px !important;
    font-weight:700 !important;
}

body.rc-editor-open #rc-editor-modal .rc-side-switch button:is(:hover, :focus-visible){
    background:var(--rc-surface-3) !important;
    color:var(--rc-text-primary) !important;
}

body.rc-editor-open #rc-editor-modal .rc-side-switch button:is(.is-active, [aria-pressed="true"]){
    background:var(--rc-blue) !important;
    color:#fff !important;
}

body.rc-editor-open #rc-editor-modal .rc-history-controls{
    gap:4px !important;
    padding-left:10px !important;
    border-left:1px solid var(--rc-border-soft) !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-side-switch{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop .rc-history-controls{
    padding-left:0 !important;
    border-left:0 !important;
}

body.rc-editor-open #rc-editor-modal .rc-history-controls button{
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    padding:0 !important;
    font-size:0 !important;
}

body.rc-editor-open #rc-editor-modal .rc-topbar-actions{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    justify-self:end !important;
    gap:8px !important;
}

body.rc-editor-open #rc-editor-modal .rc-topbar button{
    min-width:0 !important;
    height:38px !important;
    margin:0 !important;
    padding:0 13px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    border:1px solid var(--rc-border) !important;
    border-radius:var(--rc-radius-md) !important;
    background:var(--rc-surface-1) !important;
    color:var(--rc-text-primary) !important;
    box-shadow:none !important;
    font-size:12px !important;
    font-weight:650 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    transition:background var(--rc-transition-fast), border-color var(--rc-transition-fast), color var(--rc-transition-fast) !important;
}

body.rc-editor-open #rc-editor-modal .rc-topbar button:is(:hover, :focus-visible){
    border-color:var(--rc-blue) !important;
    background:var(--rc-surface-3) !important;
}

body.rc-editor-open #rc-editor-modal .rc-topbar button:focus-visible{
    outline:2px solid rgba(37, 99, 235, .28) !important;
    outline-offset:2px !important;
}

body.rc-editor-open #rc-editor-modal .rc-topbar button:disabled{
    border-color:var(--rc-border-soft) !important;
    color:var(--rc-text-disabled) !important;
    cursor:not-allowed !important;
}

body.rc-editor-open #rc-editor-modal #rc-save-template-top{
    border-color:var(--rc-blue) !important;
    background:var(--rc-blue) !important;
    color:#fff !important;
}

body.rc-editor-open #rc-editor-modal #rc-save-template-top:hover{
    background:var(--rc-blue-hover) !important;
}

body.rc-editor-open #rc-editor-modal #rc-export-print-top{
    border-color:var(--rc-border) !important;
    background:var(--rc-surface-2) !important;
    color:var(--rc-text-primary) !important;
}

body.rc-editor-open #rc-editor-modal #rc-add-to-cart-designer-top{
    flex:1 1 auto !important;
    min-width:128px !important;
    max-width:220px !important;
    padding-block:4px !important;
    border-color:var(--rc-orange) !important;
    background:var(--rc-orange) !important;
    color:#fff !important;
    line-height:1.15 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
}

body.rc-editor-open #rc-editor-modal #rc-add-to-cart-designer-top:hover{
    background:var(--rc-orange-hover) !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop #rc-add-to-cart-designer-top{
    flex:0 0 auto !important;
    min-width:164px !important;
    max-width:none !important;
    height:40px !important;
    gap:8px !important;
    padding-block:0 !important;
    border-color:var(--rc-orange) !important;
    background:#fff7ed !important;
    color:#9a3412 !important;
    box-shadow:none !important;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    transform:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop #rc-add-to-cart-designer-top:is(:hover, :focus-visible){
    border-color:var(--rc-orange-hover) !important;
    background:#ffedd5 !important;
    color:#7c2d12 !important;
    box-shadow:none !important;
    transform:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-desktop #rc-add-to-cart-designer-top:disabled{
    border-color:var(--rc-border) !important;
    background:var(--rc-surface-2) !important;
    color:var(--rc-text-disabled) !important;
    box-shadow:none !important;
    opacity:.65 !important;
    cursor:progress !important;
    transform:none !important;
}

body.rc-editor-open #rc-editor-modal #rc-cancel-editor{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal .rc-topbar button > .rc-icon{
    width:16px;
    height:16px;
    stroke-width:2;
}

body.rc-editor-open #rc-editor-modal:not(.rcsd-device-mobile) :is(#rc-mobile-more-toggle, #rc-mobile-more-menu){
    display:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-topbar{
    display:flex !important;
    gap:10px !important;
    padding-inline:10px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-topbar-left{
    min-width:72px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-brand-full,
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-brand-full{
    display:none;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-brand-compact,
body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-brand-compact{
    display:inline;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-topbar-actions{
    gap:5px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-topbar-actions button{
    padding-inline:8px !important;
    font-size:11px !important;
}

@media (min-width:720px) and (max-width:899px){
    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet{
        --rc-topbar-height:58px;
    }

    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-topbar{
        gap:6px !important;
        padding-inline:6px !important;
    }

    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-topbar-left{
        min-width:54px !important;
    }

    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-side-switch button{
        min-width:48px !important;
        padding-inline:7px !important;
    }

    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet .rc-topbar-actions button{
        font-size:0 !important;
        width:36px !important;
        padding:0 !important;
    }
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-topbar{
    display:flex !important;
    gap:6px !important;
    padding-inline:8px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-topbar-left{
    flex:1 1 auto !important;
    min-width:0 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-topbar-center{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile .rc-topbar-actions{
    flex:0 0 auto !important;
    gap:5px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile :is(#rc-open-mockup, #rc-back-product, #rc-export-print-top){
    display:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile :is(#rc-save-template-top, #rc-add-to-cart-designer-top){
    min-width:72px !important;
    max-width:88px !important;
    padding-inline:8px !important;
    font-size:10.5px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile #rc-mobile-more-toggle{
    min-width:68px !important;
    padding-inline:9px !important;
    font-size:10.5px !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile #rc-mobile-more-menu{
    border-color:var(--rc-border) !important;
    background:var(--rc-panel-elevated) !important;
    color:var(--rc-text-primary) !important;
    box-shadow:var(--rc-shadow-panel) !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile #rc-mobile-more-menu button{
    background:var(--rc-surface-2) !important;
    color:var(--rc-text-primary) !important;
}

/* ============================================================
   RC UI 3.0 — RESPONSIVE TOPBAR REAL OWNER
   Uses the existing Lucide icon system.
   ============================================================ */

/* ------------------------------------------------------------
   MOBILE PORTRAIT / MOBILE PROFILE
   ------------------------------------------------------------ */

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
.rc-topbar{
    overflow:visible !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
.rc-topbar-actions{
    position:relative !important;
    overflow:visible !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-save-template-top{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-mobile-more-menu[hidden]{
    display:none !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-mobile-more-menu:not([hidden]){
    display:grid !important;
    position:absolute !important;
    top:calc(100% + 6px) !important;
    right:0 !important;
    bottom:auto !important;
    left:auto !important;
    width:190px !important;
    min-width:190px !important;
    max-width:calc(100vw - 16px) !important;
    margin:0 !important;
    padding:6px !important;
    gap:4px !important;
    transform:none !important;
    border:1px solid var(--rc-border) !important;
    border-radius:10px !important;
    background:var(--rc-panel-elevated) !important;
    box-shadow:var(--rc-shadow-panel) !important;
    z-index:2147483000 !important;
}

body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
#rc-mobile-more-menu button{
    width:100% !important;
    min-width:0 !important;
    height:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    font-size:12px !important;
}

/* ------------------------------------------------------------
   TABLET COMPACT — 720px to 899px
   Real Lucide icons, never synthetic pseudo-elements.
   ------------------------------------------------------------ */

@media (min-width:720px) and (max-width:899px){
    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
    .rc-topbar-actions{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:5px !important;
    }

    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
    .rc-topbar-actions > button:not(#rc-mobile-more-toggle){
        width:36px !important;
        min-width:36px !important;
        max-width:36px !important;
        height:36px !important;
        min-height:36px !important;
        padding:0 !important;
        margin:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:0 !important;
        font-size:0 !important;
        line-height:1 !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
    .rc-topbar-actions > button.rc-has-lucide-icon > .rc-icon{
        display:block !important;
        position:static !important;
        width:17px !important;
        min-width:17px !important;
        max-width:17px !important;
        height:17px !important;
        min-height:17px !important;
        max-height:17px !important;
        margin:0 !important;
        padding:0 !important;
        transform:none !important;
        flex:0 0 17px !important;
        color:currentColor !important;
        stroke:currentColor !important;
        opacity:1 !important;
        visibility:visible !important;
    }

    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
    #rc-mobile-more-toggle,
    body.rc-editor-open #rc-editor-modal.rcsd-device-tablet
    #rc-mobile-more-menu{
        display:none !important;
    }
}


/* ============================================================
   RC UI 3.0 — MOBILE FINAL DETAILS
   ============================================================ */

/*
 * Cancelar e Voltar usam a mesma infraestrutura de saída.
 * Na Topbar responsiva somente Voltar deve permanecer visível.
 */
body.rc-editor-open #rc-editor-modal
.rc-topbar-actions > #rc-cancel-editor{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/*
 * MOBILE PORTRAIT
 * O texto real do botão continua intacto para desktop/JS.
 * Visualmente apresentamos apenas "Adicionar" + carrinho.
 */
@media (max-width:719px) and (orientation:portrait){

    body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
    #rc-add-to-cart-designer-top{
        position:relative !important;
        width:86px !important;
        min-width:86px !important;
        max-width:86px !important;
        height:36px !important;
        min-height:36px !important;
        padding:0 7px 0 27px !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        overflow:hidden !important;

        font-size:0 !important;
        line-height:1 !important;
        white-space:nowrap !important;
    }

    body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
    #rc-add-to-cart-designer-top > .rc-icon{
        position:absolute !important;
        left:9px !important;
        top:50% !important;
        width:15px !important;
        height:15px !important;
        margin:0 !important;
        transform:translateY(-50%) !important;
        color:currentColor !important;
        stroke:currentColor !important;
        opacity:1 !important;
        visibility:visible !important;
    }

    body.rc-editor-open #rc-editor-modal.rcsd-device-mobile
    #rc-add-to-cart-designer-top::after{
        content:"Adicionar" !important;

        display:block !important;

        font-family:var(--rcx-font-family) !important;
        font-size:10px !important;
        font-weight:700 !important;
        line-height:1 !important;

        color:currentColor !important;
        white-space:nowrap !important;
    }
}