/**
 * Cost of Living Calculator — brand-styled to match the site.
 * Scoped under .tgl-tool--cost-of-living-calculator so nothing here
 * bleeds into other tools or the article body.
 */

.tgl-tool--cost-of-living-calculator {
    max-width: 700px;
    margin: 2rem auto;
    font-family: 'Open Sans', Arial, sans-serif;
    color: #122806;
}

.tgl-tool--cost-of-living-calculator .tgl-calc__form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tgl-tool--cost-of-living-calculator .tgl-calc__section {
    background: #122806;
    color: #fff;
    border: 0;
    border-radius: 24px;
    padding: 1.75rem 1.75rem 1.5rem;
    margin: 0;
}

.tgl-tool--cost-of-living-calculator h3.tgl-calc__section-title {
    margin: 0 0 1rem;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    text-transform: uppercase;
    color: #CFD877;
    line-height: 1.2;
}

.tgl-tool--cost-of-living-calculator .tgl-calc__hint {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}
.tgl-tool--cost-of-living-calculator .tgl-calc__hint a {
    color: #CFD877;
    text-decoration: underline;
}

.tgl-tool--cost-of-living-calculator .tgl-calc__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__field > span {
    font-weight: 600;
    color: #fff;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__field--check {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: #fff;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__field--check input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: #CFD877;
    cursor: pointer;
}

.tgl-tool--cost-of-living-calculator .tgl-calc__field input[type="number"],
.tgl-tool--cost-of-living-calculator .tgl-calc__field input[type="text"],
.tgl-tool--cost-of-living-calculator .tgl-calc__field input[type="time"] {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    color: #122806;
    background: #fff;
    -moz-appearance: textfield;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__field input[type="number"]::-webkit-outer-spin-button,
.tgl-tool--cost-of-living-calculator .tgl-calc__field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__field input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #CFD877;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__field small.tgl-calc__hint {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    margin: 0.15rem 0 0;
    line-height: 1.4;
}

.tgl-tool--cost-of-living-calculator .tgl-calc__subgroup {
    padding: 0.75rem 0 0.5rem 1rem;
    margin: -0.25rem 0 1rem 0.55rem;
    border-left: 2px solid #CFD877;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__subgroup[hidden] { display: none; }

.tgl-tool--cost-of-living-calculator .tgl-calc__subtotal {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    color: #CFD877;
    text-align: right;
}

/* Grocery flyers accordion */
.tgl-tool--cost-of-living-calculator .tgl-calc__flyers {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
}
.tgl-tool--cost-of-living-calculator .tgl-calc__flyers summary {
    cursor: pointer;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #CFD877;
    list-style: none;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__flyers summary::-webkit-details-marker { display: none; }
.tgl-tool--cost-of-living-calculator .tgl-calc__flyers summary::after {
    content: " +";
    font-weight: 400;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__flyers[open] summary::after { content: " –"; }
.tgl-tool--cost-of-living-calculator .tgl-calc__flyer-list {
    columns: 2;
    column-gap: 1.5rem;
    padding: 0.75rem 0 0.25rem;
    margin: 0.5rem 0 0;
    list-style: none;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__flyer-list li { margin-bottom: 0.35rem; }
.tgl-tool--cost-of-living-calculator .tgl-calc__flyer-list a {
    color: #fff;
    text-decoration: underline;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__flyer-list a:hover { color: #CFD877; }
@media (max-width: 480px) {
    .tgl-tool--cost-of-living-calculator .tgl-calc__flyer-list { columns: 1; }
}

/* Maps consent notice */
.tgl-tool--cost-of-living-calculator .tgl-calc__maps-notice {
    padding: 1rem 1.25rem;
    margin: 0 0 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
}
.tgl-tool--cost-of-living-calculator .tgl-calc__maps-notice p {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #fff;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__maps-notice[hidden] { display: none; }
.tgl-tool--cost-of-living-calculator .tgl-calc__maps-notice .tgl-btn {
    border-radius: 24px;
    background: #CFD877;
    color: #122806;
    border: 0;
    padding: 0.5rem 1.1rem;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__maps-notice .tgl-btn:hover { background: #fff; }

/* Addresses block */
.tgl-tool--cost-of-living-calculator .tgl-calc__addresses {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Map-related action buttons + inline result strings */
.tgl-tool--cost-of-living-calculator .tgl-calc__map-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__map-actions .tgl-btn {
    align-self: flex-start;
    border-radius: 24px;
    background: #CFD877;
    color: #122806;
    border: 0;
    padding: 0.6rem 1.2rem;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__map-actions .tgl-btn:hover { background: #fff; }
.tgl-tool--cost-of-living-calculator .tgl-calc__map-actions .tgl-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__result {
    margin: 0;
    padding: 0.65rem 0.9rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #fff;
    min-height: 1.25em;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__result:empty { display: none; }

.tgl-tool--cost-of-living-calculator .tgl-calc__map {
    height: 320px;
    width: 100%;
    max-width: 100%;
    border-radius: 24px;
    overflow: hidden;
    margin: 0 0 1rem;
    background: rgba(255, 255, 255, 0.06);
}
.tgl-tool--cost-of-living-calculator .tgl-calc__map[hidden] { display: none; }

/* Transit itinerary steps (from Directions response) */
.tgl-tool--cost-of-living-calculator .tgl-calc__transit-steps {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__step {
    padding: 0.4rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__step--walk {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
}
.tgl-tool--cost-of-living-calculator .tgl-calc__step--ttc    { background: #b71c1c; color: #fff; }
.tgl-tool--cost-of-living-calculator .tgl-calc__step--miway  { background: #0288d1; color: #fff; }
.tgl-tool--cost-of-living-calculator .tgl-calc__step--yrt    { background: #4fc3f7; color: #062633; }
.tgl-tool--cost-of-living-calculator .tgl-calc__step--up     { background: #f57c00; color: #fff; }
.tgl-tool--cost-of-living-calculator .tgl-calc__step--go     { background: #2e7d32; color: #fff; }

/* Grand total card */
.tgl-tool--cost-of-living-calculator .tgl-calc__total-card {
    background: #122806;
    color: #fff;
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    text-align: center;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__total-label {
    margin: 0 0 0.25rem;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #CFD877;
    font-weight: 700;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__total-amount {
    margin: 0 0 0.5rem;
    font-family: var(--tgl-font-serif, 'Crimson Pro', serif);
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__total-breakdown {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

.tgl-tool--cost-of-living-calculator .tgl-calc__feedback {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: #122806;
    text-align: center;
}
.tgl-tool--cost-of-living-calculator .tgl-calc__feedback a {
    color: #122806;
    text-decoration: underline;
}

/* Google Places dropdown lives OUTSIDE our .tgl-tool wrapper by design
 * (it's appended to <body>). Bump z-index so it renders above sticky
 * headers and match the brand feel just a touch. */
.pac-container {
    z-index: 100000;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(18, 40, 6, 0.15);
    font-family: 'Open Sans', Arial, sans-serif;
}

@media (max-width: 480px) {
    .tgl-tool--cost-of-living-calculator .tgl-calc__map { height: 240px; }
}