/* /guides/how-much-data (src/services/dataUsageGuide.js); layout from hubs.css. */
.guide-data-calc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 0.9rem 1.25rem;
    max-width: 52rem;
    padding: 1.25rem;
    border: 1px solid #c7d2fe;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, #eef2ff 0%, #fff 60%);
}

.guide-data-field {
    display: grid;
    gap: 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

.guide-data-field input,
.guide-data-field select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    background: #fff;
    font: inherit;
    font-weight: 400;
    color: #0f172a;
}

.guide-data-field input:focus-visible,
.guide-data-field select:focus-visible {
    outline: 3px solid #a5b4fc;
    outline-offset: 1px;
}

.guide-data-result,
.guide-data-note,
.guide-data-buy {
    grid-column: 1 / -1;
}

.guide-data-result {
    margin: 0.25rem 0 0;
    font-size: 1.1rem;
    color: #1e293b;
}

.guide-data-result strong {
    color: #4338ca;
    font-size: 1.35rem;
}

.guide-data-note {
    margin: 0;
    font-size: 0.85rem;
    color: #475569;
}

.guide-data-buy {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: 999px;
    background: #4338ca;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.guide-data-buy:hover {
    background: #3730a3;
}

.guide-data-cost td small {
    display: block;
    color: #475569;
    font-size: 0.8rem;
}

.guide-data .uk-sources {
    font-size: 0.85rem;
    color: #475569;
}

/* Safari ignores min-height on native selects: draw our own so the
   calculator's selects are full-size tap targets on iPhone too. */
.guide-data-field select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234338ca' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E") right 0.75rem center / 1.125rem no-repeat;
}