/* ============================================================
   GO2RUN — Global Responsive Stylesheet
   Applies to all pages, loaded after page-specific styles.
   ============================================================ */

/* ---- RESET OVERFLOW ---- */
html {
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
}
img {
    max-width: 100%;
    height: auto;
}

/* ---- NAVBAR ---- */
.navbar-brand img {
    max-height: 38px !important;
    width: auto;
    object-fit: contain;
}

@media (max-width: 991px) {
    .navbar .navbar-collapse {
        /* dark theme — ver index.css e navbar.php */
        padding: 0.75rem 1rem 1rem;
        border-radius: 10px;
        margin-top: 0.5rem;
    }
    .navbar .navbar-nav .nav-link {
        padding: 0.55rem 0.5rem !important;
        border-radius: 6px;
    }
    .navbar .navbar-nav .ms-3 {
        margin-left: 0 !important;
        margin-top: 0.4rem;
    }
    .navbar .navbar-nav .btn-outline-primary {
        margin-top: 0.4rem;
        display: inline-block;
    }
}

/* ---- TYPOGRAPHY SCALING ---- */
@media (max-width: 576px) {
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.35rem !important; }
    h3 { font-size: 1.15rem !important; }
    .display-1, .display-2, .display-3 { font-size: 2rem !important; }
    .lead { font-size: 1rem !important; }

    .container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .py-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .mb-4 {
        margin-bottom: 1rem !important;
    }
}

/* ---- HERO SECTIONS (produto_detalhe, programacao, etc.) ---- */
@media (max-width: 768px) {
    .hero-banner {
        min-height: 280px !important;
        padding: 2.5rem 0 !important;
    }
    .hero-content h1,
    .hero-content .hero-title {
        font-size: 2rem !important;
    }
    .hero-content .lead {
        font-size: 1rem !important;
    }
    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 0.75rem;
    }
}
@media (max-width: 576px) {
    .hero-banner {
        min-height: 220px !important;
    }
    .hero-content h1,
    .hero-content .hero-title {
        font-size: 1.6rem !important;
    }
    .hero-overlay,
    .hero-content {
        height: 100% !important;
    }
    .hero-banner.ago2run-banner {
        height: 280px !important;
    }
    /* Ajuste para hero principal ocupar menos espaço no mobile */
    .hero,
    .hero .carousel-item img {
        min-height: 320px !important;
        height: 38vh !important;
        max-height: 380px !important;
    }
    .hero-content {
        padding: 0 8px !important;
    }
    .hero-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.7rem !important;
    }
    .hero-subtitle {
        font-size: 0.98rem !important;
        margin-bottom: 1.2rem !important;
    }
    .btn-hero {
        font-size: 0.98rem !important;
        padding: 0.7rem 1.2rem !important;
    }
    /* Reduzir paddings/margins das seções principais */
    .opportunities-section,
    .loja-section,
    .newsletter-section,
    .cta-section,
    .talentos-section {
        padding: 2rem 0 !important;
        margin-top: 1.2rem !important;
    }
    .section-title,
    .newsletter-title,
    .cta-title,
    .talentos-title {
        font-size: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }
    .btn-cta,
    .btn-talentos,
    .btn-ver-todos,
    .btn-ver-loja {
        font-size: 0.98rem !important;
        padding: 0.7rem 1.2rem !important;
    }
    .cases-section {
        padding: 1.5rem 0 !important;
    }
    .case-card {
        padding: 0.5rem !important;
    }
    .loja-card-img {
        height: 120px !important;
    }
}

/* ---- LOJA ---- */
@media (max-width: 768px) {
    .loja-hero {
        padding: 2rem 1rem !important;
    }
    .loja-hero h1 {
        font-size: 1.7rem !important;
    }
    .loja-hero p {
        font-size: 0.95rem !important;
    }
    .loja-container {
        grid-template-columns: 1fr !important;
        padding: 1rem 0 !important;
        gap: 1rem !important;
    }
    .loja-sidebar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        padding: 0.85rem !important;
        height: auto !important;
        border-radius: 10px !important;
    }
    .loja-sidebar h4 {
        width: 100%;
        margin-bottom: 0.4rem !important;
        font-size: 1rem !important;
    }
    .categoria-item {
        border-left: none !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 20px !important;
        padding: 0.35rem 0.85rem !important;
        font-size: 0.85rem !important;
        display: inline-block !important;
    }
    .categoria-item.ativo,
    .categoria-item:hover {
        background: #0055B8 !important;
        color: #fff !important;
        border-color: #0055B8 !important;
    }
    .loja-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.85rem !important;
    }
    .busca-form {
        flex-direction: column !important;
    }
    .loja-busca {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
}
@media (max-width: 480px) {
    .loja-hero h1 {
        font-size: 1.5rem !important;
    }
    .loja-grid {
        gap: 0.6rem !important;
    }
    .produto-img {
        height: 140px !important;
    }
    .produto-body {
        padding: 0.7rem !important;
    }
    .produto-titulo {
        font-size: 0.88rem !important;
    }
    .produto-preco {
        font-size: 1.05rem !important;
        margin-bottom: 0.5rem !important;
    }
    .produto-buttons {
        flex-direction: column !important;
        gap: 0.35rem !important;
    }
}

/* ---- CARRINHO ---- */
@media (max-width: 768px) {
    .carrinho-container {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .carrinho-items {
        padding: 1rem !important;
    }
    .carrinho-resumo {
        padding: 1rem !important;
    }
    .cupom-form input {
        width: 100%;
        box-sizing: border-box;
    }
    .btn-checkout {
        font-size: 0.95rem !important;
        padding: 0.85rem !important;
    }
}

/* ---- CHECKOUT CORRIDA (single column, max-width container) ---- */
@media (max-width: 576px) {
    .checkout-container {
        padding: 1.25rem !important;
        margin: 0.75rem auto !important;
        border-radius: 10px !important;
    }
}

/* ---- CHECKOUT ---- */
@media (max-width: 768px) {
    .checkout-container {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .checkout-form {
        padding: 1.25rem !important;
        border-radius: 10px !important;
    }
    .checkout-resumo {
        padding: 1.25rem !important;
        border-radius: 10px !important;
    }
    .form-row {
        grid-template-columns: 1fr !important;
    }
    .pagamento-opcoes {
        grid-template-columns: 1fr !important;
    }
    .tabs-endereco {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .tabs-endereco::-webkit-scrollbar { display: none; }
    .tabs-endereco button {
        white-space: nowrap;
        padding: 0.6rem 1rem !important;
        font-size: 0.88rem !important;
    }
    .form-section {
        padding-bottom: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }
    .form-section h3 {
        font-size: 1rem !important;
    }
}

/* ---- MINHA CONTA ---- */
.conta-container {
    margin: 16px auto !important;
}
@media (max-width: 600px) {
    .conta-container {
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .conta-header {
        padding: 1.25rem 1rem 1rem !important;
        border-radius: 0 !important;
    }
    .conta-header h2 {
        font-size: 1.3rem !important;
    }
    .conta-tabs {
        padding: 0 0.5rem !important;
    }
    .conta-tabs .nav {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .conta-tabs .nav::-webkit-scrollbar { display: none; }
    .conta-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.88rem !important;
        padding: 0.55rem 0.75rem !important;
    }
    .conta-content {
        padding: 1rem !important;
    }
    .conta-content .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.82rem;
    }
    .conta-content .table td,
    .conta-content .table th {
        padding: 0.4rem 0.5rem !important;
        white-space: nowrap;
    }
    .conta-content .btn {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }
}

/* ---- PEDIDO SUCESSO / INSCRIÇÃO SUCESSO ---- */
@media (max-width: 768px) {
    .sucesso-container {
        padding: 0 0.5rem !important;
    }
    .sucesso-header {
        padding: 2rem 1rem !important;
        border-radius: 10px !important;
    }
    .sucesso-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.8rem !important;
    }
    .pedido-grid,
    .resumo-pedido-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- PROGRAMAÇÃO ---- */
@media (max-width: 768px) {
    .corrida-card,
    .evento-card {
        margin-bottom: 1rem !important;
    }
    .section-title {
        font-size: 1.6rem !important;
        padding-left: 1rem !important;
    }
    .section-title::before {
        height: 38px !important;
    }
}
@media (max-width: 576px) {
    .section-title {
        font-size: 1.35rem !important;
    }
}

/* ---- PRODUTO DETALHE ---- */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .feature-card {
        padding: 1.25rem !important;
    }
    .cta-section {
        padding: 2rem 1rem !important;
        margin: 2rem 0 !important;
        border-radius: 12px !important;
    }
    .cta-title {
        font-size: 1.5rem !important;
    }
    .cta-description {
        font-size: 0.95rem !important;
    }
    .benefits-section {
        padding: 2rem 1rem !important;
        margin: 2rem 0 !important;
        border-radius: 12px !important;
    }
    .benefit-item {
        flex-direction: column;
        text-align: center;
    }
    .benefit-icon {
        margin-right: 0 !important;
        margin-bottom: 0.75rem;
    }
    .content-section {
        padding: 2rem 0 !important;
    }
    .product-description {
        font-size: 1rem !important;
    }
}

/* ---- CASES ---- */
@media (max-width: 768px) {
    .hero-section {
        padding: 50px 0 35px !important;
    }
    .hero-title {
        font-size: 1.8rem !important;
    }
    .hero-subtitle {
        font-size: 0.95rem !important;
    }
    .case-image-container {
        height: 200px !important;
    }
    .case-main-image {
        width: 140px !important;
        height: 170px !important;
    }
    .case-title {
        font-size: 1.1rem !important;
    }
    .case-description {
        font-size: 0.9rem !important;
        min-height: auto !important;
    }
}
@media (max-width: 576px) {
    .hero-title {
        font-size: 1.5rem !important;
    }
    .case-image-container {
        height: 160px !important;
    }
    .case-main-image {
        width: 110px !important;
        height: 130px !important;
    }
}

/* ---- AGO2RUN / SOBRE ---- */
@media (max-width: 768px) {
    .hero-banner {
        height: 360px !important;
    }
    .hero-overlay {
        height: 360px !important;
    }
    .hero-content {
        height: 360px !important;
    }
}
@media (max-width: 576px) {
    .hero-banner {
        height: 260px !important;
    }
    .hero-overlay,
    .hero-content {
        height: 260px !important;
    }
}

/* ---- FOOTER ---- */
@media (max-width: 576px) {
    footer.site-footer {
        padding: 1.75rem 1rem 1.25rem !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }
    footer.site-footer .text-md-end {
        text-align: center !important;
        margin-top: 0.5rem;
    }
    footer.site-footer p {
        font-size: 0.88rem !important;
    }
}

/* ---- LOGIN / CADASTRO ---- */
@media (max-width: 576px) {
    .login-container,
    .cadastro-container {
        margin: 0.75rem !important;
        border-radius: 12px !important;
        flex-direction: column !important;
    }
    .login-left,
    .login-right,
    .cadastro-left,
    .cadastro-right {
        width: 100% !important;
        min-width: unset !important;
        border-radius: 12px 12px 0 0 !important;
    }
    .login-right,
    .cadastro-right {
        border-radius: 0 0 12px 12px !important;
        padding: 1.5rem !important;
    }
}

/* ---- TABLES (global safety) ---- */
@media (max-width: 768px) {
    .table-wrap,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- TOUCH TARGETS ---- */
@media (max-width: 768px) {
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 42px;
    }
    select.form-select,
    input.form-control,
    textarea.form-control {
        font-size: 16px !important; /* prevents iOS zoom */
        min-height: 42px;
    }
}

/* ---- FORM SELECTS / INPUTS inside passo cards ---- */
@media (max-width: 768px) {
    .passo-card .form-select,
    .passo-card input[type="text"],
    .passo-card input[type="number"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    .passo-card form > div[style*="flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem !important;
    }
    .passo-card .btn {
        width: 100% !important;
    }
}

/* ---- INSCRICAO SUCESSO ---- */
@media (max-width: 576px) {
    .sucesso-container {
        max-width: 100% !important;
        margin: 0.75rem !important;
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }
}