.card {
    border-radius: 1rem; 
    box-shadow: 0 10px 15px -3px var(--secondary-color), 0 4px 6px -2px var(--secondary-color);; 
    margin-top: 2rem; 
}

/* A more specific grid container used within this card */
.card>.grid-container {
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 2rem; 
    padding: 1.5rem;
}

@media (min-width: 1024px) { 
    .card>.grid-container { 
        grid-template-columns: repeat(2, 1fr); 
        padding: 2rem; 
    } 
}

/* Unique header for the calculator card */
.calculator-header {
    background-color: var(--color-white); 
    padding: 1.5rem 2rem; 
    border-bottom: 1px solid var(--border-color);
}
.calculator-header h1 {
    font-size: 1.75rem; 
    font-weight: bold; 
    margin: 0 0 0.5rem 0;
}
.calculator-header p {
    color: var(--color-gray); 
    text-align: center; 
    margin: 0;
}

/* Unique input section and grid layout */
.input-section > div:not(.input-grid):not(.button-container) { 
    margin-bottom: 1.5rem; 
}
.input-group { 
    position: relative; 
}
.input-group-text { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    padding: 0 0.75rem; 
    display: flex; 
    align-items: center; 
    color: #6b7280; 
    background-color: #f3f4f6; 
    border-right: 1px solid #d1d5db; 
    border-top-left-radius: 0.375rem; 
    border-bottom-left-radius: 0.375rem; 
}
.input-field { 
    padding-left: 3rem; 
}
.input-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 1rem; 
    margin-bottom: 1.5rem; 
}
@media (min-width: 768px) { 
    .input-grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}

.button-container { 
    display: flex; 
    gap: 1rem; 
    padding-top: 1rem; 
}

/* Unique, class-based button component styles */
.btn { 
    width: 100%; 
    color: var(--color-white); 
    font-weight: bold; 
    padding: 0.75rem 1rem; 
    border: none; 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); 
    transition: all 0.3s; 
    cursor: pointer; 
    font-size: 1rem; 
}
.btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 7px 10px -3px rgba(0,0,0,0.15), 0 4px 6px -2px rgba(0,0,0,0.1); 
}
.btn:focus { 
    outline: none; 
    box-shadow: 0 0 0 3px rgba(26, 72, 238, 0.4); 
}
.btn-primary { 
    background-color: var(--main-color); 
}
.btn-primary:hover { 
    background-color: var(--secondary-color); 
}
.btn-secondary { 
    background-color: var(--color-gray); 
}
.btn-secondary:hover { 
    background-color: #374151; 
}

/* Unique instructions and results components */
.instructions-box { 
    background-color: var(--main-background); 
    border: 1px solid var(--secondary-color); 
    color: #1e40af; 
    padding: 1rem; 
    border-radius: 0.5rem; 
    margin-bottom: 1.5rem; 
}
.instructions-box h3 { 
    font-weight: bold; 
    font-size: 1.125rem; 
    margin: 0 0 0.5rem 0; 
}
.instructions-box ul { 
    list-style-type: disc; 
    list-style-position: inside; 
    padding: 0; 
    margin: 0; 
}
.results-container { 
    background-color: var(--secondary-background); 
    padding: 1.5rem; 
    border-radius: 0.5rem; 
    border: 1px solid var(--border-color); 
}
.results-container h2 { 
    font-size: 1.25rem; 
    font-weight: bold; 
    color: #1f2937; 
    margin: 0 0 1rem 0; 
    text-align: center; 
}
.results-item { 
    display: flex; 
    justify-content: space-between; 
    padding: 0.75rem; 
    border-radius: 0.5rem; 
    margin-bottom: 0.75rem; 
}
.results-item:last-child { 
    margin-bottom: 0; 
}
.results-item span:first-child { 
    font-weight: 500; 
    color: var(--color-gray); 
}
.results-item span:last-child { 
    font-weight: 600; 
    color: #1f2937; 
}
.results-item.green { 
    background-color: var(--color-light-green); 
}
.results-item.green span:first-child { 
    color: var(--color-green-dark); 
}
.results-item.green span:last-child { 
    color: var(--color-contrast-green); 
}
.results-item.total { 
    background-color: var(--tertiary-background); 
    padding: 1rem; 
    margin-top: 0.5rem; 
}
.results-item.total span { 
    font-size: 1.125rem; 
    font-weight: bold; 
}
.results-item.total span:first-child { 
    color: var(--main-color); 
}
.results-item.total span:last-child { 
    color: var(--tertiary-color); 
}

/* Unique content section for SEO text */
.seo-content { 
    padding: 1.5rem 2rem; 
}
.seo-content h2 { 
    font-size: 1.5rem; 
    font-weight: bold; 
    margin-top: 0; 
    margin-bottom: 1rem; 
    padding-bottom: 0.5rem; 
    border-bottom: 2px solid var(--border-color); 
}
.seo-content h3 { 
    font-size: 1.25rem; 
    font-weight: bold; 
    margin-top: 1.5rem; 
    margin-bottom: 0.5rem; 
}
.seo-content p, .seo-content ul { 
    margin-bottom: 1rem; 
}
.seo-content ul { 
    list-style-position: inside; 
}

/* Unique media queries for this specific layout */
@media (max-width: 299px) {
    .button-container {
        flex-direction: column;
    }
}
@media (max-width: 320px) {
    .calculator-header, .grid-container, .seo-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
@media (max-width: 260px) {
    .card {
        margin-left: 0;
        margin-right: 0;
    }
    .calculator-header, .grid-container, .seo-content, fieldset.input-grouping {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
     .calculator-header h1 {
        overflow-wrap: break-word; /* Allow long words to break */
        word-break: break-all; /* More aggressive breaking for older browsers */
     }
     .seo-content h2 {
        overflow-wrap: break-word;
        word-break: break-all;
     }
     fieldset {
        min-width: 0; /* Fix for fieldset overflow */
     }
}

