/* ============================================================
   LEAD CAPTURE — lead-capture.css
   ============================================================ */

/* ── 1. Visitor dot button ─────────────────────────────────── */
.lc-dot-wrap {
    position:         fixed;
    top:              50%;
    left:             0;
    transform:        translateY(-50%);
    z-index:          99990;
}
.lc-dot {
    display:          block;
    width:            14px;
    height:           14px;
    border-radius:    0 50% 50% 0;
    background:       #1a73e8;
    border:           none;
    cursor:           pointer;
    padding:          0;
    transition:       transform .15s ease, box-shadow .15s ease;
}
.lc-dot:hover {
    transform:        scale(1.1);
    box-shadow:       0 0 6px rgba(26,115,232,.4);
}

/* ── 2. Modal overlay ──────────────────────────────────────── */
.lc-overlay {
    display:          none;
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,.45);
    z-index:          99999;
    align-items:      center;
    justify-content:  center;
}
.lc-overlay.is-open {
    display:          flex;
}

.lc-modal {
    background:       #fff;
    border-radius:    14px;
    padding:          32px 28px 28px;
    width:            min(420px, 92vw);
    box-shadow:       0 8px 32px rgba(0,0,0,.18);
    position:         relative;
    animation:        lcFadeUp .18s ease;
}
@media (prefers-color-scheme: dark) {
    .lc-modal { background: #1e1e1e; color: #e8e8e8; }
}

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

.lc-modal__close {
    position:         absolute;
    top:              12px;
    right:            14px;
    background:       none;
    border:           none;
    font-size:        22px;
    line-height:      1;
    cursor:           pointer;
    color:            #888;
    padding:          2px 6px;
    border-radius:    6px;
}
.lc-modal__close:hover { background: rgba(0,0,0,.07); }

.lc-modal__title {
    font-size:        17px;
    font-weight:      600;
    margin:           0 0 6px;
}
.lc-modal__sub {
    font-size:        13px;
    color:            #666;
    margin:           0 0 18px;
}

.lc-modal__info {
    display:          flex;
    flex-direction:   column;
    gap:              4px;
    margin-bottom:    18px;
    font-size:        12px;
    color:            #777;
    background:       #f5f5f5;
    border-radius:    8px;
    padding:          10px 12px;
}
@media (prefers-color-scheme: dark) {
    .lc-modal__info { background: #2a2a2a; color: #aaa; }
}
.lc-modal__info span { word-break: break-all; }
.lc-modal__info strong { color: #444; }
@media (prefers-color-scheme: dark) {
    .lc-modal__info strong { color: #ccc; }
}

.lc-modal__field {
    display:          flex;
    gap:              8px;
    align-items:      stretch;
}
.lc-modal__input {
    flex:             1;
    border:           1.5px solid #d0d0d0;
    border-radius:    8px;
    padding:          10px 12px;
    font-size:        15px;
    outline:          none;
    transition:       border-color .15s;
    background:       #fff;
    color:            #111;
}
.lc-modal__input:focus { border-color: #1a73e8; }
@media (prefers-color-scheme: dark) {
    .lc-modal__input { background:#2a2a2a; border-color:#444; color:#e8e8e8; }
}

.lc-modal__btn {
    background:       #1a73e8;
    color:            #fff;
    border:           none;
    border-radius:    8px;
    padding:          10px 18px;
    font-size:        14px;
    font-weight:      600;
    cursor:           pointer;
    white-space:      nowrap;
    transition:       background .15s;
}
.lc-modal__btn:hover    { background: #1558b0; }
.lc-modal__btn:disabled { background: #a0b8e0; cursor: default; }

.lc-modal__msg {
    margin-top:       12px;
    font-size:        13px;
    min-height:       18px;
    text-align:       center;
}
.lc-modal__msg.ok  { color: #1a8a4a; }
.lc-modal__msg.err { color: #c0392b; }

/* ── 3. Admin drawer ───────────────────────────────────────── */
.lc-drawer {
    position:         fixed;
    top:              50%;
    left:             0;
    transform:        translateY(-50%);
    z-index:          99990;
    display:          flex;
    align-items:      stretch;
    height:           auto;
    max-height:       80vh;
}

.lc-drawer__tab {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              6px;
    width:            22px;
    background:       #1a73e8;
    color:            #fff;
    border:           none;
    cursor:           pointer;
    border-radius:    0 8px 8px 0;
    padding:          12px 0;
    writing-mode:     vertical-rl;
    user-select:      none;
    transition:       background .15s;
    flex-shrink:      0;
}
.lc-drawer__tab:hover { background: #1558b0; }

.lc-drawer__arrow {
    font-size:        16px;
    transition:       transform .25s ease;
    writing-mode:     horizontal-tb;
    line-height:      1;
}
.lc-drawer__label {
    font-size:        11px;
    font-weight:      700;
    letter-spacing:   .06em;
    text-transform:   uppercase;
}

.lc-drawer.is-open .lc-drawer__arrow {
    transform: rotate(180deg);
}

.lc-drawer__panel {
    width:            0;
    overflow:         hidden;
    transition:       width .28s ease;
    background:       #fff;
    border-radius:    0 10px 10px 0;
    box-shadow:       4px 0 24px rgba(0,0,0,.14);
    display:          flex;
    flex-direction:   column;
}
@media (prefers-color-scheme: dark) {
    .lc-drawer__panel { background: #1e1e1e; color: #e0e0e0; }
}

.lc-drawer.is-open .lc-drawer__panel {
    width:            520px;
    max-width:        90vw;
}

.lc-drawer__header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          12px 16px 10px;
    border-bottom:    1px solid #eee;
    flex-shrink:      0;
}
@media (prefers-color-scheme: dark) {
    .lc-drawer__header { border-color: #333; }
}

.lc-drawer__title {
    font-size:        14px;
    font-weight:      700;
    white-space:      nowrap;
}

.lc-drawer__refresh {
    background:       none;
    border:           none;
    font-size:        18px;
    cursor:           pointer;
    color:            #555;
    padding:          2px 6px;
    border-radius:    6px;
    transition:       transform .3s ease;
}
.lc-drawer__refresh:hover { transform: rotate(180deg); color: #1a73e8; }
@media (prefers-color-scheme: dark) {
    .lc-drawer__refresh { color: #aaa; }
}

/* ── 4. Leads table ────────────────────────────────────────── */
.lc-table-wrap {
    overflow-y:       auto;
    flex:             1;
    padding:          0 4px 8px;
}

.lc-empty {
    padding:          20px;
    text-align:       center;
    color:            #888;
    font-size:        13px;
}

.lc-table {
    width:            100%;
    border-collapse:  collapse;
    font-size:        12px;
    white-space:      nowrap;
}

.lc-table thead th {
    position:         sticky;
    top:              0;
    background:       #f8f8f8;
    padding:          7px 10px;
    text-align:       left;
    font-weight:      700;
    color:            #444;
    border-bottom:    1px solid #e0e0e0;
}
@media (prefers-color-scheme: dark) {
    .lc-table thead th { background: #2a2a2a; color: #ccc; border-color: #444; }
}

.lc-table tbody tr:hover { background: #f0f6ff; }
@media (prefers-color-scheme: dark) {
    .lc-table tbody tr:hover { background: #252d3a; }
}

.lc-table td {
    padding:          6px 10px;
    border-bottom:    1px solid #f0f0f0;
    color:            #333;
    max-width:        160px;
    overflow:         hidden;
    text-overflow:    ellipsis;
}
/* Email column — never truncate */
.lc-table td:nth-child(2) {
    max-width:        none;
    overflow:         visible;
    white-space:      nowrap;
    font-weight:      600;
}
@media (prefers-color-scheme: dark) {
    .lc-table td { color: #ddd; border-color: #333; }
}

.lc-url {
    color:            #1a73e8;
    text-decoration:  none;
    display:          inline-block;
    max-width:        160px;
    overflow:         hidden;
    text-overflow:    ellipsis;
    vertical-align:   middle;
}
.lc-url:hover { text-decoration: underline; }

.lc-gclid {
    font-family:      monospace;
    font-size:        11px;
    color:            #888;
}