/* =============================================================
   Smart Share for WooCommerce – Public Styles
   ============================================================= */

/* ---- Inline share button ---- */
.ssw-share-btn--inline {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    padding: .65rem 1.4rem;
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
}

.ssw-share-btn--inline:hover {
    background: #1ebe59;
    transform: translateY(-1px);
}

/* ---- Floating bar ---- */
.ssw-floating-bar {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9990;
}

.ssw-share-btn--floating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: .75rem 1.1rem;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(124,58,237,.35);
    transition: transform .2s, background .2s;
}

.ssw-share-btn--floating:hover {
    background: #6d28d9;
    transform: scale(1.07);
}

.ssw-floating-bar__icon {
    font-size: 1.3rem;
}

/* ---- Overlay ---- */
.ssw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* transitions */
    opacity: 1;
    transition: opacity .2s;
}

.ssw-overlay[hidden] {
    display: none;
}

/* ---- Popup ---- */
.ssw-popup {
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: sswSlideUp .25s ease;
}

@keyframes sswSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.ssw-popup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #64748b;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 4px;
    transition: background .15s;
}

.ssw-popup__close:hover {
    background: #f1f5f9;
}

.ssw-popup__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.25rem;
}

.ssw-popup__label {
    font-weight: 600;
    color: #334155;
    margin: 0 0 .75rem;
}

/* ---- Platform buttons ---- */
.ssw-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.ssw-platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .65rem .9rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
    transition: border-color .15s, background .15s;
    min-width: 72px;
}

.ssw-platform-btn[aria-pressed="true"],
.ssw-platform-btn.is-active {
    border-color: #7c3aed;
    background: #f3f0ff;
    color: #7c3aed;
}

.ssw-platform-btn__icon {
    font-size: 1.5rem;
}

/* ---- Inputs ---- */
.ssw-popup__field {
    margin-bottom: 1rem;
}

.ssw-popup__field label {
    display: block;
    font-size: .85rem;
    color: #475569;
    margin-bottom: .35rem;
}

.ssw-input {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: .9rem;
    transition: border-color .15s;
    box-sizing: border-box;
}

.ssw-input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

.ssw-input--invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

.ssw-field-help {
    margin: .35rem 0 0;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.4;
}

/* ---- Buttons ---- */
.ssw-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.2rem;
    border-radius: 7px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .15s;
}

.ssw-btn--primary {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}

.ssw-btn--primary:hover:not(:disabled) {
    background: #6d28d9;
    border-color: #6d28d9;
}

.ssw-btn--primary:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.ssw-btn--secondary {
    background: #f1f5f9;
    color: #334155;
}

.ssw-btn--secondary:hover {
    background: #e2e8f0;
}

.ssw-btn--ghost {
    background: transparent;
    border-color: #cbd5e1;
    color: #475569;
}

.ssw-btn--ghost:hover {
    background: #f8fafc;
}

/* ---- Step visibility ---- */
.ssw-popup__step--hidden {
    display: none;
}

/* ---- Preview textarea ---- */
.ssw-preview__label {
    font-size: .82rem;
    color: #64748b;
    margin-bottom: .35rem;
}

.ssw-preview__text {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: .6rem .75rem;
    font-size: .88rem;
    line-height: 1.55;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

/* ---- Image previews ---- */
.ssw-images-preview {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .75rem 0;
}

.ssw-images-preview img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* ---- Actions row ---- */
.ssw-popup__actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ---- Spinner ---- */
.ssw-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e2e8f0;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: sswSpin .7s linear infinite;
    margin: 1rem auto 0;
}

@keyframes sswSpin {
    to { transform: rotate(360deg); }
}

/* ---- Share count badge ---- */
.ssw-share-count {
    display: inline-block;
    font-size: .8rem;
    color: #64748b;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .ssw-popup {
        padding: 1.25rem;
    }

    .ssw-popup__actions {
        flex-direction: column;
    }

    .ssw-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================
   [ssw_share_link] inline widget
   ============================================================= */

.ssw-link-share {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem 0;
}

.ssw-link-share__label {
    font-size: .85rem;
    color: #64748b;
    font-weight: 600;
    margin-right: .25rem;
}

/* ---- Link share buttons ---- */
.ssw-link-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border: none;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
    color: #fff;
    white-space: nowrap;
}

.ssw-link-btn:hover {
    opacity: .88;
    transform: translateY(-1px);
}

.ssw-link-btn__icon {
    font-size: 1rem;
}

.ssw-link-btn--whatsapp  { background: #25d366; }
.ssw-link-btn--email     { background: #3b82f6; }
.ssw-link-btn--instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.ssw-link-btn--copy      { background: #475569; }

/* ---- Inline feedback text ---- */
.ssw-link-share__feedback {
    font-size: .8rem;
    color: #16a34a;
    font-weight: 600;
    opacity: 0;
    transition: opacity .2s;
    margin-left: .25rem;
}

.ssw-link-share__feedback--visible {
    opacity: 1;
}

@media (max-width: 480px) {
    .ssw-link-share {
        gap: .4rem;
    }

    .ssw-link-btn {
        padding: .4rem .7rem;
        font-size: .78rem;
    }
}