/**
 * TechMattaz WhatsApp Widget — widget.css  v3.7.0
 */

/* ── Global reset inside widget ──────────────────────────────────── */
#tm-wa-container,
#tm-wa-container * {
    box-sizing:              border-box  !important;
    -webkit-font-smoothing:  antialiased !important;
    -moz-osx-font-smoothing: grayscale   !important;
}

/* ── Outer wrapper ────────────────────────────────────────────────── */
#tm-wa-container {
    position: fixed       !important;
    z-index:  2147483647  !important;
    display:  block       !important;
}

/* ══════════════════════════════════════════════════════════════════
   PSEUDO-ELEMENT KILL — covers every element inside the widget.
   "all: unset" resets every CSS property on the pseudo-element.
   Then we set content:''/position:absolute/width:0/height:0/overflow:hidden
   so even if a browser ignores "all:unset", the pseudo-element has
   zero size and is clipped to nothing.
   ══════════════════════════════════════════════════════════════════ */
#tm-wa-container *::before,
#tm-wa-container *::after {
    all:        unset    !important;
    content:    ''       !important;  /* must be '' not 'none' for all:unset compat */
    display:    block    !important;
    position:   absolute !important;
    width:      0        !important;
    height:     0        !important;
    overflow:   hidden   !important;
    opacity:    0        !important;
    visibility: hidden   !important;
    pointer-events: none !important;
    font-size:  0        !important;
    line-height: 0       !important;
    border:     0        !important;
    padding:    0        !important;
    margin:     0        !important;
    background: transparent !important;
    color:      transparent !important;
    box-shadow: none     !important;
    transform:  none     !important;
    animation:  none     !important;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTON CLIP WRAPPER
   Wraps the toggle button. Any pseudo-element that escapes the
   button but is still a descendant of this wrapper gets clipped.
   ══════════════════════════════════════════════════════════════════ */
#tm-wa-btn-wrap {
    position:   relative !important;
    display:    inline-flex !important;
    overflow:   hidden   !important;  /* clips escaped pseudo-elements */
    width:      60px     !important;
    height:     60px     !important;
    border-radius: 50%   !important;
    flex-shrink: 0       !important;
}

/* ══════════════════════════════════════════════════════════════════
   TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════════ */
#tm-wa-toggle {
    position:           relative    !important;
    width:              60px        !important;
    height:             60px        !important;
    border-radius:      50%         !important;
    border:             none        !important;
    outline:            none        !important;
    padding:            0           !important;
    margin:             0           !important;
    -webkit-appearance: none        !important;
    appearance:         none        !important;
    background-clip:    padding-box !important;
    display:            flex        !important;
    align-items:        center      !important;
    justify-content:    center      !important;
    cursor:             pointer     !important;
    box-shadow:         0 6px 22px rgba(0,0,0,0.30) !important;
    overflow:           hidden      !important;
    transition:         transform 0.28s ease, box-shadow 0.28s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    vertical-align:     top        !important;
    text-align:         center     !important;
    font-size:          0          !important;
    line-height:        0          !important;
}
#tm-wa-toggle:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.36) !important;
    transform:  scale(1.07) !important;
}
#tm-wa-toggle:active { transform: scale(0.93) !important; }

#tm-wa-toggle svg {
    display:     block  !important;
    flex-shrink: 0      !important;
    overflow:    hidden !important;
}

/* ══════════════════════════════════════════════════════════════════
   HOVER LABEL
   Uses a CSS class (.tm-wa-label-visible) toggled by JS instead of
   direct opacity manipulation — this defeats opacity:0 !important
   being set by the stylesheet.
   ══════════════════════════════════════════════════════════════════ */
#tm-wa-label {
    position:       absolute !important;
    bottom:         70px    !important;
    /* left/right set by PHP inline style based on pos_x, updated by admin.js on slider move */
    background:     #1a1a1a !important;
    color:          #ffffff !important;
    padding:        7px 14px !important;
    border-radius:  20px    !important;
    font-size:      13px    !important;
    font-weight:    600     !important;
    white-space:    nowrap  !important;
    box-shadow:     0 3px 10px rgba(0,0,0,0.25) !important;
    pointer-events: none    !important;
    font-family:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    line-height:    1.3     !important;
    letter-spacing: 0       !important;
    text-transform: none    !important;
    display:        block   !important;
    /* Hidden by default via opacity + transition */
    opacity:        0       !important;
    transition:     opacity 0.22s ease !important;
}
/* JS adds this class on hover — !important here beats !important above
   because both are !important but this selector is more specific */
#tm-wa-label.tm-wa-label-visible {
    opacity:    1 !important;
    transition: opacity 0.22s ease !important;
}

/* ══════════════════════════════════════════════════════════════════
   CHAT BOX  (width reduced ~4%: 330→317px)
   ══════════════════════════════════════════════════════════════════ */
#tm-wa-box {
    position:       absolute  !important;
    bottom:         70px      !important;
    width:          317px     !important;
    max-width:      92vw      !important;
    background:     #ffffff   !important;
    border-radius:  14px      !important;
    overflow:       hidden    !important;
    box-shadow:     0 16px 50px rgba(0,0,0,0.22) !important;
    display:        none;     /* JS sets to flex — no !important */
    flex-direction: column    !important;
    font-family:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size:      14px      !important;
    line-height:    1.4       !important;
    border:         1px solid rgba(0,0,0,0.08) !important;
}

/* ── Header ──────────────────────────────────────────────────────── */
#tm-wa-header {
    position:      relative  !important;
    color:         #ffffff   !important;
    padding:       15px 50px 15px 15px !important;
    display:       flex      !important;
    align-items:   center    !important;
    flex-shrink:   0         !important;
    gap:           10px      !important;
}

#tm-wa-header-icon {
    width:           42px   !important;
    height:          42px   !important;
    min-width:       42px   !important;
    border-radius:   50%    !important;
    background:      rgba(255,255,255,0.2) !important;
    display:         flex   !important;
    align-items:     center !important;
    justify-content: center !important;
    overflow:        hidden !important;
    flex-shrink:     0      !important;
    font-size:       0      !important;
    line-height:     0      !important;
}
#tm-wa-header-icon svg { display: block !important; }

#tm-wa-header-title {
    display:        block   !important;
    font-weight:    700     !important;
    font-size:      15px    !important;
    line-height:    1.3     !important;
    margin:         0       !important;
    padding:        0       !important;
    color:          #ffffff !important;
    font-family:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    text-transform: none    !important;
    letter-spacing: 0       !important;
}

#tm-wa-header-sub {
    display:        block   !important;
    font-size:      11px    !important;
    opacity:        0.9     !important;
    margin-top:     2px     !important;
    color:          #ffffff !important;
    font-family:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight:    400     !important;
    text-transform: none    !important;
    letter-spacing: 0       !important;
    line-height:    1.4     !important;
}

/* ── Close button ─────────────────────────────────────────────────── */
#tm-wa-close-btn {
    position:        absolute   !important;
    top:             50%        !important;
    right:           12px       !important;
    transform:       translateY(-50%) !important;
    width:           28px       !important;
    height:          28px       !important;
    background:      rgba(255,255,255,0.20) !important;
    border:          none       !important;
    border-radius:   50%        !important;
    cursor:          pointer    !important;
    display:         none;      /* JS sets to flex — no !important */
    align-items:     center     !important;
    justify-content: center     !important;
    padding:         0          !important;
    margin:          0          !important;
    -webkit-appearance: none    !important;
    appearance:      none       !important;
    pointer-events:  auto       !important;
    z-index:         20         !important;
    transition:      background 0.18s ease !important;
    flex-shrink:     0          !important;
    font-size:       0          !important;
    line-height:     0          !important;
    overflow:        hidden     !important;
}
#tm-wa-close-btn:hover {
    background: rgba(255,255,255,0.35) !important;
}
#tm-wa-close-btn svg {
    display:     block  !important;
    flex-shrink: 0      !important;
}

/* ── Body ─────────────────────────────────────────────────────────── */
#tm-wa-body {
    flex-grow:        1       !important;
    padding:          15px    !important;
    background:       #e5ddd5 !important;
    background-color: #e5ddd5 !important;
    overflow-y:       auto    !important;
    display:          flex    !important;
    flex-direction:   column  !important;
    min-height:       154px   !important;
    max-height:       307px   !important;
}

/* ── Greeting bubble ─────────────────────────────────────────────── */
.tm-wa-bubble {
    background:      #dcf8c6  !important;
    background-color:#dcf8c6  !important;
    padding:         12px 14px !important;
    border-radius:   10px 10px 10px 2px !important;
    margin-bottom:   13px     !important;
    font-size:       13px     !important;
    color:           #1a1a1a  !important;
    box-shadow:      0 1px 3px rgba(0,0,0,0.10) !important;
    line-height:     1.55     !important;
    font-family:     'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight:     400      !important;
    text-transform:  none     !important;
    letter-spacing:  0        !important;
}

/* ── Start-chat button ───────────────────────────────────────────── */
.tm-wa-direct-btn {
    display:        block   !important;
    color:          #ffffff !important;
    text-align:     center  !important;
    padding:        13px 18px !important;
    border-radius:  28px    !important;
    text-decoration:none    !important;
    font-weight:    700     !important;
    font-size:      14px    !important;
    box-shadow:     0 4px 14px rgba(0,0,0,0.15) !important;
    transition:     filter 0.2s ease, transform 0.15s ease !important;
    font-family:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    text-transform: none    !important;
    letter-spacing: 0       !important;
    line-height:    1.3     !important;
    border:         none    !important;
    cursor:         pointer !important;
    -webkit-appearance: none !important;
}
.tm-wa-direct-btn:hover {
    filter:          brightness(1.08) !important;
    transform:       translateY(-1px) !important;
    text-decoration: none             !important;
    color:           #ffffff          !important;
}

/* ── Multi-agent ─────────────────────────────────────────────────── */
.tm-wa-agent-label {
    display:        block   !important;
    font-weight:    600     !important;
    margin-bottom:  10px    !important;
    font-size:      12px    !important;
    color:          #444444 !important;
    font-family:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    text-transform: none    !important;
    letter-spacing: 0       !important;
    line-height:    1.4     !important;
}

.tm-wa-agent-card {
    display:        flex    !important;
    align-items:    center  !important;
    background:     #ffffff !important;
    background-color:#ffffff !important;
    padding:        10px 12px !important;
    border-radius:  10px    !important;
    text-decoration:none    !important;
    margin-bottom:  8px     !important;
    border-left:    5px solid #25D366; /* PHP inline style overrides */
    box-shadow:     0 2px 6px rgba(0,0,0,0.07) !important;
    transition:     transform 0.15s ease, box-shadow 0.15s ease !important;
    cursor:         pointer !important;
}
.tm-wa-agent-card:hover {
    transform:  translateX(3px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    text-decoration: none !important;
}

.tm-wa-agent-avatar {
    width:           38px  !important;
    height:          38px  !important;
    min-width:       38px  !important;
    background:      #f0f0f0 !important;
    background-color:#f0f0f0 !important;
    border-radius:   50%   !important;
    display:         flex  !important;
    align-items:     center !important;
    justify-content: center !important;
    font-weight:     700   !important;
    margin-right:    10px  !important;
    font-size:       15px  !important;
    font-family:     'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    flex-shrink:     0     !important;
    line-height:     1     !important;
}

.tm-wa-agent-name {
    display:        block   !important;
    font-weight:    700     !important;
    color:          #1a1a1a !important;
    font-size:      12px    !important;
    font-family:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    text-transform: none    !important;
    letter-spacing: 0       !important;
    line-height:    1.3     !important;
    margin:         0       !important;
    padding:        0       !important;
}

.tm-wa-agent-role {
    display:        block   !important;
    font-size:      11px    !important;
    color:          #777777 !important;
    font-family:    'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight:    400     !important;
    text-transform: none    !important;
    letter-spacing: 0       !important;
    margin:         2px 0 0 !important;
    padding:        0       !important;
    line-height:    1.3     !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
#tm-wa-footer {
    padding:     8px 10px !important;
    text-align:  center   !important;
    font-size:   11px     !important;
    background:  #f8f8f8  !important;
    background-color: #f8f8f8 !important;
    border-top:  1px solid rgba(0,0,0,0.07) !important;
    color:       #888888  !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 400      !important;
    line-height: 1.4      !important;
}
#tm-wa-footer a {
    text-decoration: none !important;
    font-weight:     700  !important;
}
#tm-wa-footer a:hover { text-decoration: underline !important; }

/* ── Narrow screens ──────────────────────────────────────────────── */
@media screen and (max-width: 480px) {
    #tm-wa-box {
        width:     94vw !important;
        max-width: 94vw !important;
    }
}