/* ============================================================
   Seller Contact Buttons — v3.3
   Two shapes, one visual language:
     circle  = 52px perfect circle, icon only
     rect    = pill shape (icon only, wider), same height/depth
   ============================================================ */

/* ── Shared base — applies to ALL button variants ───────── */
.scb-circle,
.scb-dot,
.scb-rect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    flex-shrink: 0;
    line-height: 1;
    font-family: inherit;
}

.scb-circle svg,
.scb-dot svg,
.scb-rect svg {
    display: block;
    flex-shrink: 0;
}

/* No text labels — icon only for both shapes */
.scb-rect span { display: none; }

/* ── Hover — identical lift + shadow for all shapes ─────── */
.scb-circle:hover,
.scb-rect:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.scb-dot:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.13);
}

/* ── Full-size: circle ──────────────────────────────────── */
.scb-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.scb-circle svg { width: 20px; height: 20px; }

/* ── Full-size: rect
     Fixed width (wider than tall) + small radius = clear rectangle
     Same height as circle so they align perfectly on one row        ── */
.scb-rect {
    width: 80px;          /* visibly wider than the 52px circle */
    height: 40px;
    border-radius: 10px;  /* soft corner, not a pill, not a sharp box */
    padding: 0;
}
.scb-rect svg { width: 20px; height: 20px; }

/* ── Compact: dot circle ────────────────────────────────── */
.scb-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}
.scb-dot svg { width: 16px; height: 16px; }

/* ── Compact: rect — same logic scaled down ─────────────── */
.scb-compact .scb-rect {
    width: 54px;          /* wider than the 38px dot */
    height: 38px;
    border-radius: 10px;
    padding: 0;
}
.scb-compact .scb-rect svg { width: 16px; height: 16px; }

/* ── Colours — shared across circle + rect + dot ────────── */

/* Call — blue */
.scb-circle-call,
.scb-dot-call,
.scb-rect-call {
    background: #4361ee;
    color: #fff;
    box-shadow: 0 4px 12px rgba(67,97,238,0.25);
}
.scb-circle-call:hover,
.scb-dot-call:hover,
.scb-rect-call:hover { background: #3451d1; box-shadow: 0 8px 20px rgba(67,97,238,0.3); }

/* WhatsApp — green */
.scb-circle-wa,
.scb-dot-wa,
.scb-rect-wa {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37,211,102,0.25);
}
.scb-circle-wa:hover,
.scb-dot-wa:hover,
.scb-rect-wa:hover { background: #1eba57; box-shadow: 0 8px 20px rgba(37,211,102,0.3); }

/* Reveal — soft grey */
.scb-circle-reveal,
.scb-dot-reveal,
.scb-rect-reveal {
    background: #f1f3f5;
    color: #495057;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}
.scb-circle-reveal:hover,
.scb-dot-reveal:hover,
.scb-rect-reveal:hover { background: #e2e6ea; box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

/* Contact — purple */
.scb-circle-contact,
.scb-dot-contact,
.scb-rect-contact {
    background: #7048e8;
    color: #fff;
    box-shadow: 0 4px 12px rgba(112,72,232,0.25);
}
.scb-circle-contact:hover,
.scb-dot-contact:hover,
.scb-rect-contact:hover { background: #5c36c7; box-shadow: 0 8px 20px rgba(112,72,232,0.3); }

/* ── Avatar ─────────────────────────────────────────────── */
.scb-dot-avatar {
    background: transparent;
    padding: 0;
    box-shadow: none;
}
.scb-dot-avatar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.scb-avatar {
    display: block;
    text-decoration: none;
}

.scb-avatar .scb-avatar-img,
.scb-wrap .scb-avatar-img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.scb-compact .scb-avatar-img {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ── Full wrapper ───────────────────────────────────────── */
.scb-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.scb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* ── Compact wrapper ────────────────────────────────────── */
.scb-compact {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
}

/* ── Revealed phone number pill ─────────────────────────── */
.scb-revealed {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    white-space: nowrap;
    font-family: inherit;
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 400px) {
    .scb-circle            { width: 46px; height: 46px; }
    .scb-circle svg        { width: 18px; height: 18px; }
    .scb-rect              { width: 80px; height: 40px; border-radius: 10px; }
    .scb-rect svg          { width: 18px; height: 18px; }
    .scb-row               { gap: 7px; }

    .scb-dot               { width: 34px; height: 34px; }
    .scb-dot svg           { width: 14px; height: 14px; }
    .scb-compact .scb-rect { width: 48px; height: 34px; border-radius: 9px; }
    .scb-compact           { gap: 6px; }
}