/**
 * Inspira Woo Add-ons — Contact Channels frontend styles.
 *
 * Two render contexts:
 *   • Single product page — sits in the WC product summary stack;
 *     spans the available width with N equal-width buttons.
 *   • Quick View drawer — sits inside or below the QV footer; same
 *     equal-grid pattern.
 *
 * The .iwa-cc-channels wrapper carries data-iwa-cc-count="N" so the
 * grid template scales to the actual visible channel count (1-4),
 * keeping buttons balanced regardless of how many the admin
 * configured.
 */

.iwa-cc-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

/* Hard-cap the grid template at N columns when we know the count —
   prevents stretching when only 1 or 2 channels exist (otherwise
   auto-fit would still let them grow full-width which can look
   awkward on wide containers). */
.iwa-cc-channels[data-iwa-cc-count="1"] { grid-template-columns: minmax(0, 1fr); }
.iwa-cc-channels[data-iwa-cc-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iwa-cc-channels[data-iwa-cc-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iwa-cc-channels[data-iwa-cc-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Single-product context: tighter margin since it's part of the
   summary stack already. */
.iwa-cc-channels--single {
    margin: 8px 0 12px;
}

/* QV context: a bit more breathing room since it sits against the
   footer / body boundary. Horizontal padding aligns the button grid
   with the QV body's content rhythm so buttons don't hug the panel
   edges. */
.iwa-cc-channels--qv {
    margin: 14px 0 0;
    padding: 12px 18px 14px;
    border-top: 1px solid #ececec;
}

/* ─── Buttons ──────────────────────────────────────────────────── */

.iwa-cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    background: #ffffff;
    color: #2a2520;
    border: 1px solid #d8d3cc;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
    cursor: pointer;
    /* Wrap allowed for long labels; keep icon + first line together. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iwa-cc-btn:hover {
    background: #faf6f0;
    border-color: #c2b8a8;
    color: #1a1612;
    text-decoration: none;
}

.iwa-cc-btn:active {
    transform: translateY(1px);
}

.iwa-cc-btn:focus-visible {
    outline: 2px solid #d1a177;
    outline-offset: 2px;
}

.iwa-cc-icon {
    flex-shrink: 0;
    display: inline-block;
}

.iwa-cc-btn-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ─── Per-type tints — subtle so they harmonize as a group ────── */

.iwa-cc-btn-whatsapp .iwa-cc-icon { color: #25D366; }
.iwa-cc-btn-whatsapp:hover         { border-color: #25D366; }

.iwa-cc-btn-tel .iwa-cc-icon       { color: #4a7bd5; }
.iwa-cc-btn-tel:hover              { border-color: #4a7bd5; }

.iwa-cc-btn-mailto .iwa-cc-icon    { color: #d1a177; }
.iwa-cc-btn-mailto:hover           { border-color: #d1a177; }

.iwa-cc-btn-url .iwa-cc-icon       { color: #6B665B; }

/* ─── Small-screen collapse — stack to 1-2 columns on narrow ──── */
@media (max-width: 540px) {
    .iwa-cc-channels[data-iwa-cc-count="3"],
    .iwa-cc-channels[data-iwa-cc-count="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}