/* Mobile Responsive Styles */

/* Mobile-first: Prevent horizontal overflow on all devices */
* {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

.app-container {
    max-width: 100%;
    overflow-x: hidden;
}

.calculator-card {
    max-width: 100%;
    overflow-x: hidden;
}

.result-table {
    max-width: 100%;
}

/* Tablets and smaller (max-width: 900px) */
@media (max-width: 900px) {
    .app-container {
        padding: 1.5rem 1rem;
    }

    .app-header {
        margin-bottom: 0.75rem;
        justify-content: center;
    }

    .credits-bar {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
        text-align: center;
    }

    .credit-divider {
        display: none;
    }

    .credit-text {
        font-size: 0.85rem;
    }

    .calculator-card {
        padding: 1.5rem;
    }

    .card-header {
        text-align: center !important;
    }

    .card-header h1 {
        font-size: 2rem;
    }

    .card-header p {
        font-size: 0.95rem;
    }

    .input-section {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .input-group.full-width {
        grid-column: 1;
    }

    .results-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .result-col {
        padding: 1.25rem;
    }

    .comparison-message {
        font-size: 1rem;
        padding: 1rem;
    }
}

/* Mobile phones (max-width: 600px) */
@media (max-width: 600px) {
    body {
        overflow-x: hidden;
    }

    .app-container {
        padding: 1rem 0.75rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    .app-header {
        margin-bottom: 1rem;
    }

    .logo {
        font-size: 1.25rem;
    }

    .logo i {
        font-size: 1.25rem;
        padding: 6px;
    }

    .calculator-card {
        padding: 1rem;
        border-radius: 16px;
        overflow-x: hidden;
    }

    .card-header {
        margin-bottom: 1.5rem;
        text-align: center !important;
        max-width: 100%;
    }

    .card-header h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        max-width: 100%;
        word-wrap: break-word;
    }

    .card-header p {
        font-size: 0.85rem;
        margin-bottom: 1rem;
        max-width: 100%;
        word-wrap: break-word;
    }

    .btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    .input-section {
        padding: 1rem;
        gap: 1rem;
        margin-bottom: 1.5rem;
        overflow-x: hidden;
    }

    .input-group label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .input-wrapper input {
        padding: 0.9rem 0.9rem 0.9rem 2.8rem;
        font-size: 1rem;
    }

    .input-wrapper i {
        left: 0.85rem;
        font-size: 1.1rem;
    }

    .results-grid {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .result-col {
        padding: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .col-header {
        margin-bottom: 1rem;
    }

    .col-header i {
        font-size: 1.75rem;
    }

    .col-header h2 {
        font-size: 1.15rem;
    }

    .tax-rate {
        font-size: 0.75rem;
    }

    .result-table {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        font-size: 0.85rem;
        table-layout: fixed;
        display: table;
    }

    .result-table th,
    .result-table td {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .result-table th {
        font-size: 0.7rem;
        padding: 0.65rem 0.3rem;
    }

    .result-table td {
        padding: 0.85rem 0.3rem;
        font-size: 0.85rem;
    }

    .result-table td:nth-child(1) {
        font-size: 0.8rem;
        width: 40%;
    }

    .result-table td:nth-child(2) {
        width: 30%;
    }

    .result-table td:nth-child(3) {
        width: 25%;
    }

    .result-table td:nth-child(4) {
        width: 15%;
    }

    .badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .calc-breakdown {
        font-size: 0.7rem;
    }

    .option-container {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .option-container span {
        font-size: 0.8rem;
    }

    .toggle-group {
        align-self: stretch;
        justify-content: center;
    }

    .toggle-group label {
        flex: 1;
        text-align: center;
        padding: 8px 12px;
        font-size: 0.7rem;
    }

    .total-row td {
        padding: 1rem 0.4rem !important;
    }

    .total-row td:nth-child(3) {
        font-size: 1rem;
    }

    .effective-rate-row td {
        padding: 0.85rem 0.4rem !important;
    }

    .effective-rate-row td:nth-child(3) {
        font-size: 0.95rem;
    }

    .comparison-message {
        font-size: 0.9rem;
        padding: 0.85rem;
        margin-top: 1rem;
    }

    .fine-print {
        font-size: 0.75rem;
        padding: 0.75rem;
    }

    .fine-print p {
        line-height: 1.5;
    }

    /* Hide desktop spacer on mobile */
    .interactive-option-row.desktop-only {
        display: none !important;
    }
}

/* Extra small phones (max-width: 400px) */
@media (max-width: 400px) {
    .card-header h1 {
        font-size: 1.35rem;
    }

    .input-wrapper input {
        font-size: 0.95rem;
        padding: 0.85rem 0.85rem 0.85rem 2.5rem;
    }

    .result-table th {
        font-size: 0.65rem;
        padding: 0.5rem 0.25rem;
    }

    .result-table td {
        font-size: 0.85rem;
        padding: 0.75rem 0.25rem;
    }

    .result-table td:nth-child(1) {
        font-size: 0.8rem;
    }

    .badge {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .comparison-message {
        font-size: 0.85rem;
    }
}