/* =====================================================
   [can_calculator] shortcode — styles
   All rules scoped under .cc-wrap to avoid theme bleed.
   ===================================================== */

.cc-wrap {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    color: #333;
    font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.5;
}
.cc-wrap *,
.cc-wrap *::before,
.cc-wrap *::after { box-sizing: border-box; }

/* ---------- Section heading ---------- */
.cc-section { padding: 24px 0; }
.cc-section-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 24px;
    line-height: 1.25;
}
.cc-blue  { color: #3a85c8; }
.cc-green { color: #6aa84f; }

.cc-divider {
    border: 0;
    border-top: 1px solid #cfd8d8;
    margin: 8px 0;
}

/* ---------- Input + button ---------- */
.cc-input-row {
    text-align: center;
    margin-bottom: 28px;
}
.cc-input-row label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    color: #333;
}
.cc-input-group {
    display: inline-flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}
.cc-input-group input[type="number"] {
    width: 160px;
    padding: 8px 10px;
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    font-family: inherit;       /* picks up PT Sans from .cc-wrap */
    font-size: 15px;
    background: #fff;
    color: #333;
}
.cc-input-group input[type="number"]:focus {
    outline: 2px solid #3a85c8;
    outline-offset: 1px;
}
/* Button — over-specified on purpose to beat theme :focus / :active overrides */
.cc-wrap .cc-btn,
.cc-wrap .cc-btn:link,
.cc-wrap .cc-btn:visited,
.cc-wrap .cc-btn:focus,
.cc-wrap .cc-btn:active,
.cc-wrap button.cc-btn {
    background-color: #1e8757;
    color: #ffffff;
    border: 0;
    padding: 9px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background-color 0.15s ease;
}
.cc-wrap .cc-btn:hover {
    background-color: #16653f;
    color: #ffffff;
}
.cc-wrap .cc-btn:focus-visible {
    outline: 2px solid #0f4d2f;
    outline-offset: 2px;
}

/* ---------- 4-card grid ---------- */
.cc-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: start;
}

/* ---------- Card shell ---------- */
.cc-card {
    background: #fff;
    border: 1px solid;          /* color set per variant */
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cc-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: #fff;
}
/* Icon — over-specified on purpose to beat theme img backgrounds */
.cc-wrap .cc-card__head img.cc-card__icon,
.cc-wrap img.cc-card__icon {
    width: 44px;
    height: auto;
    flex: 0 0 44px;
    display: block;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    filter: none !important;
    border-radius: 0 !important;
}
.cc-card__title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}
.cc-card__title p {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    opacity: 0.95;
}

/* Variant colors — header bg + outer card border share the same hue */
.cc-card--blue   { border-color: #3a85c8; }
.cc-card--blue   .cc-card__head { background: #3a85c8; }

.cc-card--yellow { border-color: #e8b923; }
.cc-card--yellow .cc-card__head { background: #e8b923; }

.cc-card--green  { border-color: #5a9943; }
.cc-card--green  .cc-card__head { background: #5a9943; }

.cc-card--gray   { border-color: #7f8c8d; }
.cc-card--gray   .cc-card__head { background: #7f8c8d; }

/* ---------- Card body / result table ---------- */
.cc-card__body { padding: 12px; }

.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cc-table td {
    padding: 10px 12px;
    font-weight: 700;
    color: #222;
    border: 1px solid;          /* color per variant */
    vertical-align: middle;
    line-height: 1.3;
    word-break: break-word;     /* let long labels wrap inside the cell */
}
.cc-table .cc-label {
    /* label column fills remaining space */
}
.cc-table .cc-value {
    width: 1%;                  /* shrink-to-content trick */
    min-width: 56px;            /* but never narrower than this */
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Tinted backgrounds + matching borders per variant */
.cc-table--blue td   { background: #eaf0f6; border-color: #b3c8de; }
.cc-table--yellow td { background: #fbf1d6; border-color: #e8c97a; }
.cc-table--green td  { background: #e9eee2; border-color: #b6c79a; }
.cc-table--gray td   { background: #ebeded; border-color: #c0c5c5; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .cc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .cc-section-title { font-size: 22px; }
    .cc-cards { grid-template-columns: 1fr; }
    .cc-input-group input[type="number"] { width: 140px; }
}