/* Flippr Create Coin Modal - Responsive CSS */

/* Platform buttons - ensure flex display for proper gap between logo and name */
#flippr-create-coin-modal button[data-platform] {
    display: flex !important;
}

/* Desktop (>= 1200px) - mantém layout original em 2 colunas */
@media (min-width: 1200px) {
    #flippr-create-coin-modal .flippr-token-images-section {
        display: none !important;
    }

    #flippr-create-coin-modal .flippr-responsive-right-column.original-column {
        display: flex !important;
    }
}

/* Mobile (< 1200px) */
@media (max-width: 1199px) {
    /* Modal principal - sem min-width para permitir telas < 375px */
    #flippr-create-coin-modal {
        height: auto !important;
        max-height: 100vh !important;
        min-height: min(540px, 85vh) !important;
        width: 100% !important;
        max-width: min(540px, calc(100% - 2rem)) !important;
        display: grid !important;
        gap: 0.25rem !important;
    }

    /* Wrapper content */
    #flippr-modal-content-wrapper {
        overflow-y: auto !important;
        overflow-x: auto !important;
        scrollbar-width: thin !important;
        scrollbar-color: var(--theme-accent) color-mix(in srgb, var(--theme-buttons) 30%, transparent) !important;
    }

    /* Estilo da scrollbar horizontal para navegadores Webkit */
    #flippr-modal-content-wrapper::-webkit-scrollbar {
        height: 8px !important;
    }

    #flippr-modal-content-wrapper::-webkit-scrollbar-track {
        background: color-mix(in srgb, var(--theme-buttons) 30%, transparent) !important;
        border-radius: 4px !important;
    }

    #flippr-modal-content-wrapper::-webkit-scrollbar-thumb {
        background: var(--theme-accent) !important;
        border-radius: 4px !important;
    }

    #flippr-modal-content-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--theme-accent) !important;
    }

    /* Layout responsivo - empilhar colunas com min-width */
    #flippr-create-coin-modal .flippr-responsive-layout {
        flex-direction: column !important;
        height: auto !important;
        overflow-y: visible !important;
        min-width: 325px !important;
        padding: 10px !important;
        gap: 10px !important;
    }

    /* Header com min-width para forçar scroll horizontal */
    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child {
        min-width: 325px !important;
        padding: 6px 12px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Header reorganizado para mobile - flex com gap */
    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        position: relative !important;
    }

    /* Container do título - order 1 */
    #flippr-modal-content-wrapper > div:first-child > div:last-child {
        order: 1 !important;
        flex-shrink: 1 !important;
    }

    /* Logo - posicionada em 60% horizontal */
    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child > div:first-child {
        position: absolute !important;
        top: 50% !important;
        left: 60% !important;
        transform: translate(-50%, -50%) !important;
        width: 80px !important;
        height: 48px !important;
    }

    /* Imagem da logo dentro do container - ajusta object-fit */
    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child > div:first-child img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* Close button - mantém no canto direito */
    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child > button.absolute:not(#flippr-popup-btn) {
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
    }

    /* Popup button - posicionado em 85% horizontal, mantém top original */
    #flippr-create-coin-modal #flippr-popup-btn {
        position: absolute !important;
        top: 10px !important;
        left: 85% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    #flippr-modal-content-wrapper > div:first-child h1 {
        font-size: 16px !important;
    }

    /* Coluna esquerda ocupa largura total com min-width */
    #flippr-create-coin-modal .flippr-responsive-left-column {
        flex: none !important;
        width: 100% !important;
        min-width: 325px !important;
        margin-bottom: 12px !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* Coluna direita ocupa largura total */
    #flippr-create-coin-modal .flippr-responsive-right-column {
        flex: none !important;
        width: 100% !important;
    }

    /* Seção de token images aparece no mobile */
    #flippr-create-coin-modal .flippr-token-images-section.flippr-responsive-right-column {
        display: block !important;
        order: 1 !important;
        margin-top: 12px !important;
    }

    /* Social links mantém ordem */
    #flippr-create-coin-modal .flippr-social-links-section {
        order: 0 !important;
    }

    /* Coluna direita original esconde no mobile */
    #flippr-create-coin-modal .flippr-responsive-right-column.original-column {
        display: none !important;
    }

    /* Conteúdo da coluna direita dentro da mobile section */
    #flippr-create-coin-modal .flippr-token-images-section > * {
        display: block !important;
    }

    /* Ocultar setas bidirecionais no modo mobile */
    #flippr-create-coin-modal div[class*="-mt-5"],
    #flippr-create-coin-modal .grid > div[class*="flex-col"][class*="items-center"][class*="justify-center"] {
        display: none !important;
    }

    /* Ajustar grid dos deploy slots para 3 colunas sem setas */
    #flippr-create-coin-modal .grid[style*="grid-template-columns: 1fr auto 1fr auto 1fr"] {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 12px !important;
        align-items: start !important;
    }

    /* Advanced features buttons mais finos no mobile */
    #flippr-create-coin-modal .advanced-features-section {
        gap: 6px !important;
    }

    #flippr-create-coin-modal .flippr-bundle-button,
    #flippr-create-coin-modal .flippr-multi-deploy-button,
    #flippr-create-coin-modal .flippr-auto-sell-button,
    #flippr-create-coin-modal #bundle-btn,
    #flippr-create-coin-modal #multi-deploy-btn,
    #flippr-create-coin-modal #auto-sell-btn {
        padding: 8px 8px !important;
        font-size: 9px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #flippr-create-coin-modal .advanced-features-section svg {
        width: 14px !important;
        height: 14px !important;
    }

    #flippr-create-coin-modal .advanced-features-section span {
        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
    }

    /* Platform buttons - ícones ao lado esquerdo dos nomes */
    #flippr-create-coin-modal button[data-platform="pump"],
    #flippr-create-coin-modal button[data-platform="bonk"],
    #flippr-create-coin-modal button[data-platform="four"],
    #flippr-create-coin-modal button[data-platform="mon"] {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Platform buttons SVG - tamanho reduzido */
    #flippr-create-coin-modal button[data-platform] svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Platform buttons IMG (Four) - 2px menor que SVGs */
    #flippr-create-coin-modal button[data-platform] img {
        width: 12px !important;
        height: 12px !important;
    }

    /* Platform buttons span - fonte menor */
    #flippr-create-coin-modal button[data-platform] span {
        font-size: 9px !important;
    }

    /* Platform buttons grid - reduzir minmax para permitir shrink até 376px */
    #flippr-create-coin-modal div[style*="grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    /* Reduzir padding das seções para economizar espaço horizontal */
    #flippr-create-coin-modal .rounded-lg {
        padding: 10px !important;
    }

    /* Deploy slots menores - aplicar nos containers internos */
    #flippr-create-coin-modal .deploy-slot .w-24.h-24,
    #flippr-create-coin-modal .deploy-slot > div,
    #flippr-create-coin-modal .deploy-slot > div[data-slot-id] {
        width: 96px !important;
        height: 96px !important;
        min-width: 96px !important;
        min-height: 96px !important;
        max-width: 96px !important;
        max-height: 96px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Imagens dentro dos deploy slots devem ocupar todo o espaço e ficar atrás do pontilhado */
    #flippr-create-coin-modal .deploy-slot img,
    #flippr-create-coin-modal .deploy-slot > div img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        z-index: 0 !important;
    }

    #flippr-create-coin-modal .deploy-slot svg {
        width: 20px !important;
        height: 20px !important;
    }

    #flippr-create-coin-modal .deploy-slot .text-xs {
        font-size: 10px !important;
    }

    /* Deploy labels menores */
    #flippr-create-coin-modal .grid > div > span[style*="font-size"],
    #flippr-create-coin-modal .grid > div > span[class*="text-"] {
        font-size: 9px !important;
    }

    /* Source buttons - fonte e altura menores no mobile */
    #flippr-create-coin-modal button[class*="h-[34px]"],
    #flippr-create-coin-modal .grid button[class*="rounded-md"] {
        height: 28px !important;
        font-size: 8px !important;
    }

    /* Header principal - altura reduzida */
    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child {
        padding: 10px 19px !important;
    }

    /* Títulos Platform e Token Images - tamanho padronizado e menor */
    #flippr-create-coin-modal h3 {
        font-size: 11px !important;
    }

    /* Círculos dos títulos - tamanho padronizado */
    #flippr-create-coin-modal h3 > div[style*="width: 6px"],
    #flippr-create-coin-modal h3 > div[style*="width: 7px"],
    #flippr-create-coin-modal h3 > div[class*="w-[7px]"],
    #flippr-create-coin-modal h3 > div[class*="w-[6px]"] {
        width: 5px !important;
        height: 5px !important;
    }

    /* Labels dos campos - fonte menor */
    #flippr-create-coin-modal label {
        font-size: 10px !important;
    }

    #flippr-create-coin-modal label svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* Inputs dos campos - fonte menor e padding reduzido */
    #flippr-create-coin-modal input[placeholder="Enter token name"],
    #flippr-create-coin-modal input[placeholder="Enter ticker"],
    #flippr-create-coin-modal input[placeholder="https://example.com"],
    #flippr-create-coin-modal input[placeholder="https://x.com/username"] {
        padding: 6px 36px 6px 8px !important;
        font-size: 11px !important;
    }

    /* Token Details grid - ajustar proporção para caber em 376px */
    #flippr-create-coin-modal .grid[style*="grid-template-columns: 1fr 2fr"] {
        grid-template-columns: 1fr 1.8fr !important;
        gap: 8px !important;
    }

    /* Translation buttons - ajuste para novo padding do input */
    #flippr-create-coin-modal .translation-button {
        right: 6px !important;
        padding: 4px 6px !important;
    }

    #flippr-create-coin-modal .translation-button svg {
        width: 11px !important;
        height: 11px !important;
    }

    /* Gap entre seções no mobile */
    #flippr-create-coin-modal .flippr-responsive-left-column {
        gap: 10px !important;
    }

    /* Footer buttons menores no mobile */
    #flippr-create-coin-modal .toggle-advanced-features,
    #flippr-create-coin-modal .flippr-config-button {
        width: 36px !important;
        height: 36px !important;
    }

    #flippr-create-coin-modal .toggle-advanced-features svg,
    #flippr-create-coin-modal .flippr-config-button svg {
        width: 14px !important;
        height: 14px !important;
    }

    #flippr-create-coin-modal .modal-wallet-balance-selector {
        height: 36px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

    #flippr-create-coin-modal .modal-wallet-balance-selector span {
        font-size: 11px !important;
    }

    #flippr-create-coin-modal .modal-wallet-balance-selector svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Launch button mantém tamanho original no mobile */
    #flippr-create-coin-modal button[class*="h-[52px]"]:not(.sol-btn),
    #flippr-create-coin-modal .flippr-footer > div > button:last-child {
        height: 52px !important;
        padding: 16px 28px !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
        gap: 8px !important;
    }

    #flippr-create-coin-modal .flippr-footer > div > button:last-child svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* SOL buttons mantêm tamanho original no mobile */
    #flippr-create-coin-modal .sol-btn {
        height: 52px !important;
        padding: 16px 40px !important;
        flex-shrink: 0 !important;
    }

    #flippr-create-coin-modal .sol-btn > div:first-child {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    #flippr-create-coin-modal .sol-btn > div:last-child {
        font-size: 9px !important;
        line-height: 1 !important;
    }

    /* SOL input container mantém tamanho original */
    #flippr-create-coin-modal .sol-input-container {
        width: 70px !important;
        height: 52px !important;
        padding: 6px 4px !important;
        flex-shrink: 0 !important;
    }

    #flippr-create-coin-modal .sol-input-container input {
        font-size: 12px !important;
        height: 18px !important;
    }

    #flippr-create-coin-modal .sol-input-container svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Reorganizar footer em 2 linhas com min-width */
    #flippr-create-coin-modal .flippr-footer {
        padding: 8px 8px 54px 8px !important;
        position: relative !important;
        min-width: 340px !important;
    }

    #flippr-create-coin-modal .footer-content,
    #flippr-create-coin-modal .flippr-footer > div {
        flex-direction: column !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    /* Esconde o spacer */
    #flippr-create-coin-modal .footer-spacer {
        display: none !important;
    }

    /* LINHA 1: Ações principais (SOL + LAUNCH) */
    #flippr-create-coin-modal .footer-main-actions {
        order: 1 !important;
        width: 100% !important;
        justify-content: space-between !important;
        gap: 12px !important;
        display: flex !important;
    }

    /* Botões SOL responsivos - ocupam todo o espaço disponível */
    #flippr-create-coin-modal .sol-buttons-group {
        flex: 1 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    #flippr-create-coin-modal .sol-btn {
        flex: 1 !important;
        min-width: 0 !important;
        width: 33.33% !important;
        padding: 12px 6px !important;
        height: 48px !important;
    }

    /* Launch button compacto */
    #flippr-create-coin-modal .footer-main-actions > button:last-child,
    #flippr-create-coin-modal #launch-token-button {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        padding: 12px 24px !important;
        font-size: 14px !important;
        height: 48px !important;
    }

    /* LINHA 2: Controles secundários com position absolute */
    #flippr-create-coin-modal .flippr-config-button {
        position: absolute !important;
        left: 8px !important;
        bottom: 10px !important;
        order: 2 !important;
        width: 36px !important;
        height: 36px !important;
    }

    #flippr-create-coin-modal .toggle-advanced-features {
        position: absolute !important;
        left: 56px !important;
        bottom: 10px !important;
        order: 2 !important;
        width: 36px !important;
        height: 36px !important;
    }

    #flippr-create-coin-modal .modal-wallet-balance-selector {
        position: absolute !important;
        left: 104px !important;
        bottom: 10px !important;
        order: 2 !important;
        padding: 6px 10px !important;
        height: 36px !important;
        font-size: 11px !important;
    }

    /* SOL input no canto inferior direito */
    #flippr-create-coin-modal .sol-input-container {
        position: absolute !important;
        right: 8px !important;
        bottom: 10px !important;
        order: 2 !important;
        width: 85px !important;
        height: 36px !important;
        flex-direction: row-reverse !important;
        gap: 5px !important;
        padding: 4px 6px !important;
    }

    #flippr-create-coin-modal .sol-input-container .sol-amount-input {
        width: 50px !important;
        height: 20px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        padding: 2px 4px !important;
        border: none !important;
        background: transparent !important;
        text-align: center !important;
    }

    #flippr-create-coin-modal .sol-input-container svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }


    /* Título Create Coin menor */
    #flippr-create-coin-modal h1 {
        font-size: 16px !important;
    }

    /* Ícone Create Coin menor */
    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child .flex > div[class*="w-[34px]"] {
        width: 28px !important;
        height: 28px !important;
    }

    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child .flex > div[class*="w-[34px]"] svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Close button menor */
    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child > button {
        width: 28px !important;
        height: 28px !important;
        top: 10px !important;
    }

    #flippr-create-coin-modal #flippr-modal-content-wrapper > div:first-child > button svg {
        width: 14px !important;
        height: 14px !important;
    }
}