/*
 * WhatsApp pricing calculator (marketing/meta-calculator.blade.php). Builds on home.css (FAQ, nav, footer)
 * and pricing.css (the fee cards), and adds the calculator, the ways to lower the bill and the rate table.
 */

/* Clears the fixed nav. Needs .mc-page to outrank .v3-page .section in home.css */
.mc-page .mc-hero { padding-top: 7.5rem; }
@media (min-width: 768px) { .mc-page .mc-hero { padding-top: 9rem; } }
.mc-page .mc-hero h1.h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.mc-head { max-width: 50rem; margin: 0 auto; }

/* ---------- Calculator: the inputs, then the bill ---------- */
.mc-calc { display: grid; gap: 1rem; margin-top: 2.5rem; align-items: start; }
@media (min-width: 960px) { .mc-calc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.mc-in, .mc-out {
    display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: 1.25rem;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.mc-out { box-shadow: inset 0 0 0 1px var(--line-2); }
@media (min-width: 960px) { .mc-out { position: sticky; top: 6rem; } }

.mc-row, .mc-grid { display: grid; gap: 1rem; }
@media (min-width: 560px) { .mc-row, .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mc-field { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.mc-field > span { font-size: .84rem; font-weight: 600; color: var(--text); }
.mc-field small { font-size: .76rem; color: var(--text-3); }
.mc-field input, .mc-field select, .mc-table-top input {
    width: 100%; min-height: 2.9rem; padding: .6rem .9rem; border: 0; border-radius: .85rem;
    font: inherit; font-size: 1rem; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
}
/* Safari ignores height and radius on a native select, so drop its own look and draw the chevron */
.mc-field select {
    -webkit-appearance: none; appearance: none; padding-right: 2.6rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d918a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center; background-size: 1rem;
}
.mc-field select option, .mc-field select optgroup { color: #062019; background: #fff; }
.mc-field input:focus-visible, .mc-field select:focus-visible, .mc-table-top input:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }

.mc-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; padding: .25rem; border-radius: 9999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.mc-seg button { min-height: 2.4rem; border: 0; border-radius: 9999px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--text-2); background: none; cursor: pointer; transition: background .2s, color .2s; }
.mc-seg button[aria-pressed="true"] { color: #062019; background: var(--mint); }
.mc-seg button:focus-visible, .mc-presets button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.mc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mc-presets span { font-size: .78rem; color: var(--text-3); }
.mc-presets button { padding: .4rem .8rem; border: 0; border-radius: 9999px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: color .2s, box-shadow .2s; }
.mc-presets button:hover { color: var(--mint); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .4); }

.mc-check { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--text-2); cursor: pointer; }
.mc-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--mint); }
.mc-aov { padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* The bill */
.mc-out-label { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.mc-total { display: block; margin-top: -.9rem; font-size: clamp(2.3rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--text); overflow-wrap: anywhere; }
.mc-total small { font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.mc-out-sub { margin-top: -.9rem; font-size: .8rem; color: var(--text-3); }

.mc-lines { display: grid; gap: .55rem; }
.mc-line { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .82rem; color: var(--text-2); }
.mc-line[hidden] { display: none; }
.mc-line i { display: block; height: .4rem; overflow: hidden; border-radius: 9999px; background: var(--surface-2); }
.mc-line i span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--mint); transition: width .35s var(--ease); }
.mc-line b { font-weight: 600; color: var(--text); }
.mc-line.is-tax i { background: none; }
.mc-free { margin-top: -.6rem; font-size: .78rem; color: var(--mint); }

.mc-sell { display: grid; gap: .75rem; }
@media (min-width: 480px) { .mc-sell { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mc-sell > div { display: grid; gap: .2rem; align-content: start; padding: .9rem 1rem; border-radius: .85rem; background: var(--surface-2); }
.mc-sell small { font-size: .74rem; color: var(--text-3); }
.mc-sell b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.mc-sell b.is-mint { color: var(--mint); }
.mc-sell em { font-size: .76rem; font-style: normal; line-height: 1.45; color: var(--text-2); }
.mc-out .btn + .btn { margin-top: -.6rem; }
.mc-note { font-size: .72rem; line-height: 1.5; color: var(--text-3); }

/* ---------- Fee cards: four across ---------- */
.mc-fees { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .mc-fees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .mc-fees { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Ways to lower the bill ---------- */
.mc-savers { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .mc-savers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mc-saver { display: grid; gap: .5rem; align-content: start; padding: 1.5rem; border-radius: 1.25rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mc-saver i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--mint); background: rgba(61, 220, 151, .12); }
.mc-saver i svg { width: 1rem; height: 1rem; }
.mc-saver h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; color: var(--text); }
.mc-saver p { font-size: .9rem; line-height: 1.55; color: var(--text-2); }
.mc-saver a { margin-top: .25rem; font-size: .86rem; font-weight: 600; color: var(--mint); }

.mc-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 1rem; padding: 1.5rem; border-radius: 1.25rem; background: rgba(61, 220, 151, .06); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .3); }
.mc-band > div { flex: 1 1 20rem; }
.mc-band b { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.mc-band p { margin-top: .25rem; font-size: .9rem; line-height: 1.55; color: var(--text-2); }

/* ---------- Rate table ---------- */
.mc-table { margin-top: 2.5rem; padding: 1rem; border-radius: 1.25rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mc-table-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: 1rem; }
.mc-table-top input { flex: 1 1 14rem; width: auto; max-width: 22rem; }
.mc-table-top span { font-size: .8rem; color: var(--text-3); }
.mc-table-top b { color: var(--text); }
.mc-table-scroll { max-height: 34rem; overflow: auto; border-radius: .85rem; }
.mc-table table { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: .88rem; }
.mc-table thead th { position: sticky; top: 0; z-index: 1; padding: .7rem .75rem; text-align: right; font-size: .74rem; font-weight: 600; color: var(--text-3); background: var(--bg-2); }
.mc-table thead th:first-child, .mc-table tbody th { text-align: left; }
.mc-table tbody th { padding: .65rem .75rem; font-weight: 600; color: var(--text); }
.mc-table td { padding: .65rem .75rem; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.mc-table tbody tr { border-top: 1px solid var(--line); }
.mc-table tbody tr[hidden] { display: none; }
.mc-table tbody tr.is-current { background: rgba(61, 220, 151, .08); }
.mc-table tbody tr.is-current th { color: var(--mint); }