/* Imperial Compounds Peptide Dosage Calculator - Mobile Responsive Styles */

@media (max-width: 768px) {
    #imperial-peptide-calculator-root h1,
    #imperial-peptide-calculator-root h2,
    #imperial-peptide-calculator-root h3,
    #imperial-peptide-dosage-root h1,
    #imperial-peptide-dosage-root h2,
    #imperial-peptide-dosage-root h3 {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #ffffff !important;
    }

    #imperial-peptide-calculator-root p,
    #imperial-peptide-dosage-root p {
        font-size: 16px !important;
        color: #ffffff !important;
    }

    /* Syringe labels - BRIGHT and readable */
    #imperial-peptide-calculator-root [style*="syringeLabel"],
    #imperial-peptide-dosage-root [style*="syringeLabel"] {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #ffeb3b !important;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.9) !important;
    }

    /* Make all paragraph text bright */
    #imperial-peptide-calculator-root p,
    #imperial-peptide-dosage-root p {
        color: #e0e0e0 !important;
    }

    /* All buttons */
    #imperial-peptide-calculator-root button,
    #imperial-peptide-dosage-root button {
        font-size: 16px !important;
        padding: 16px !important;
        font-weight: 600 !important;
        min-height: 50px !important;
    }

    /* Input fields */
    #imperial-peptide-calculator-root input,
    #imperial-peptide-dosage-root input {
        font-size: 18px !important;
        padding: 14px !important;
        min-height: 50px !important;
    }

    /* SVG text in ruler - larger numbers */
    #imperial-peptide-calculator-root svg text,
    #imperial-peptide-dosage-root svg text {
        font-size: 18px !important;
        font-weight: bold !important;
        fill: #ffeb3b !important;
    }

    /* Result values - brighter colors */
    #imperial-peptide-calculator-root span[style*="33aaff"],
    #imperial-peptide-dosage-root span[style*="33aaff"] {
        font-size: 16px !important;
        color: #33aaff !important;
    }

    /* Large result numbers */
    #imperial-peptide-calculator-root span[style*="f5d876"],
    #imperial-peptide-dosage-root span[style*="f5d876"] {
        color: #ffeb3b !important;
        font-size: 36px !important;
    }

    /* Result titles */
    #imperial-peptide-calculator-root [style*="resultTitle"],
    #imperial-peptide-dosage-root [style*="resultTitle"] {
        font-size: 24px !important;
        color: #ffeb3b !important;
    }

    /* Section titles */
    #imperial-peptide-calculator-root h2[style*="sectionTitle"],
    #imperial-peptide-dosage-root h2[style*="sectionTitle"] {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }

    /* "Where to Draw" section */
    #imperial-peptide-calculator-root h3[style*="rulerTitle"],
    #imperial-peptide-dosage-root h3[style*="rulerTitle"] {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
    }

    #imperial-peptide-calculator-root [style*="rulerLabel"],
    #imperial-peptide-dosage-root [style*="rulerLabel"] {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-shadow: 0 0 6px rgba(255, 235, 59, 0.6) !important;
    }

    /* General text improvements */
    #imperial-peptide-calculator-root,
    #imperial-peptide-dosage-root {
        font-size: 16px !important;
    }

    /* Result note text - make readable */
    #imperial-peptide-calculator-root [style*="resultNote"],
    #imperial-peptide-dosage-root [style*="resultNote"] {
        color: #d0d0d0 !important;
        font-size: 15px !important;
    }

    /* All p tags bright */
    #imperial-peptide-calculator-root p,
    #imperial-peptide-dosage-root p {
        color: #ffffff !important;
    }
}

@media (max-width: 480px) {
    #imperial-peptide-calculator-root > div,
    #imperial-peptide-dosage-root > div {
        padding: 12px !important;
    }

    #imperial-peptide-calculator-root h2,
    #imperial-peptide-dosage-root h2 {
        font-size: 18px !important;
    }

    #imperial-peptide-calculator-root button,
    #imperial-peptide-dosage-root button {
        font-size: 15px !important;
        padding: 12px !important;
    }

    #imperial-peptide-calculator-root svg text,
    #imperial-peptide-dosage-root svg text {
        font-size: 16px !important;
    }
}