/* =====================================================
   Smart Suite Plugin – Front-end Styles
   ===================================================== */

:root {
    --ss-primary:    #2563eb;
    --ss-primary-h:  #1d4ed8;
    --ss-success:    #16a34a;
    --ss-error:      #dc2626;
    --ss-bg:         #f8fafc;
    --ss-border:     #e2e8f0;
    --ss-text:       #1e293b;
    --ss-muted:      #64748b;
    --ss-radius:     10px;
    --ss-shadow:     0 4px 24px rgba(0,0,0,.08);
    --ss-font:       'Segoe UI', system-ui, sans-serif;
}

/* ── Wrapper ── */
.ss-form-wrap {
    background:    var(--ss-bg);
    border:        1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    box-shadow:    var(--ss-shadow);
    padding:       2rem 2.25rem;
    max-width:     600px;
    margin:        2rem auto;
    font-family:   var(--ss-font);
    color:         var(--ss-text);
}

.ss-newsletter-wrap {
    text-align: center;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
}

/* ── Headings ── */
.ss-form-title {
    font-size:     1.35rem;
    font-weight:   700;
    margin:        0 0 .5rem;
    letter-spacing: -.01em;
}
.ss-subtitle {
    color:   var(--ss-muted);
    margin:  0 0 1.25rem;
    font-size: .95rem;
}

/* ── Field layouts ── */
.ss-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: .75rem;
}

/* ── Inputs ── */
.ss-input {
    display:       block;
    width:         100%;
    padding:       .65rem .9rem;
    border:        1.5px solid var(--ss-border);
    border-radius: 7px;
    font-size:     .95rem;
    font-family:   var(--ss-font);
    color:         var(--ss-text);
    background:    #fff;
    transition:    border-color .2s, box-shadow .2s;
    box-sizing:    border-box;
    margin-bottom: .75rem;
}
.ss-input:focus {
    outline:      none;
    border-color: var(--ss-primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}
.ss-input::placeholder { color: #94a3b8; }

textarea.ss-input { resize: vertical; }
.ss-full { width: 100%; }

/* ── Inline form (newsletter) ── */
.ss-inline-form {
    display:   flex;
    gap:       .6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.ss-inline-form .ss-input {
    flex:        1 1 220px;
    margin-bottom: 0;
}

/* ── Button ── */
.ss-btn {
    display:       inline-block;
    padding:       .65rem 1.5rem;
    background:    var(--ss-primary);
    color:         #fff;
    border:        none;
    border-radius: 7px;
    font-size:     .95rem;
    font-weight:   600;
    font-family:   var(--ss-font);
    cursor:        pointer;
    transition:    background .2s, transform .1s;
    margin-top:    .5rem;
}
.ss-btn:hover  { background: var(--ss-primary-h); }
.ss-btn:active { transform: scale(.97); }

.ss-inline-form .ss-btn { margin-top: 0; }

/* ── Responses ── */
.ss-response {
    margin-top:    1rem;
    padding:       .7rem 1rem;
    border-radius: 7px;
    font-size:     .9rem;
    display:       none;
}
.ss-response.ss-ok  { background: #dcfce7; color: var(--ss-success); display: block; }
.ss-response.ss-err { background: #fee2e2; color: var(--ss-error);   display: block; }

/* ── Widget ── */
.ss-widget-posts {
    list-style: none;
    padding:    0;
    margin:     0;
}
.ss-widget-post {
    display:        flex;
    align-items:    center;
    gap:            .75rem;
    padding:        .6rem 0;
    border-bottom:  1px solid var(--ss-border);
}
.ss-widget-post:last-child { border-bottom: none; }
.ss-widget-post img {
    width:         56px;
    height:        56px;
    object-fit:    cover;
    border-radius: 6px;
    flex-shrink:   0;
}
.ss-widget-post-info a {
    display:     block;
    font-weight: 600;
    font-size:   .88rem;
    color:       var(--ss-text);
    text-decoration: none;
    line-height: 1.3;
}
.ss-widget-post-info a:hover { color: var(--ss-primary); }
.ss-widget-date {
    font-size: .78rem;
    color:     var(--ss-muted);
    margin-top: .2rem;
    display:    block;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .ss-field-group { grid-template-columns: 1fr; }
    .ss-form-wrap   { padding: 1.25rem 1rem; }
}