/* ============================================================
   Luxee WidgetKit — Copas Button Widget
   Handle : lxwdk-copas-button
   Version: 1.0.0
   ============================================================ */

/* ── Box: layout wrapper ───────────────────────────────────── */
.lxwdk-copas-box {
    display: flex;
    flex-direction: column;
    /* align-items TIDAK di-set di sini — dikontrol oleh Elementor box_align via selector */
    box-sizing: border-box;
}

/* ── Box alignment (prefix_class: lxwdk-copas-box-)
   Mengatur posisi gambar (align-items) + teks (text-align) sekaligus ── */
.lxwdk-copas-box-left .lxwdk-copas-box {
    align-items: flex-start;
    text-align: left;
}

.lxwdk-copas-box-center .lxwdk-copas-box {
    align-items: center;
    text-align: center;
}

.lxwdk-copas-box-right .lxwdk-copas-box {
    align-items: flex-end;
    text-align: right;
}

/* ── Image ─────────────────────────────────────────────────── */
.lxwdk-copas-image {
    flex-shrink: 0;
    margin-bottom: 16px;
}

.lxwdk-copas-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ── Content ───────────────────────────────────────────────── */
.lxwdk-copas-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Button wrapper (flex container khusus tombol) ─────────── */
/* justify-content di sini mengatur posisi tombol auto width    */
.lxwdk-copas-btn-wrap {
    display: flex;
    width: 100%;
    justify-content: center;
    /* default center — di-override oleh align class */
}

/* ── Title ─────────────────────────────────────────────────── */
.lxwdk-copas-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 8px;
    padding: 0;
}

/* ── Description ───────────────────────────────────────────── */
.lxwdk-copas-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 12px;
    padding: 0;
}

/* ── Text Display ──────────────────────────────────────────── */
/* Baris teks yang disalin — tampil di atas tombol */
.lxwdk-copas-text-display {
    font-size: 1rem;
    font-weight: 600;
    font-family: monospace;
    letter-spacing: 0.05em;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    word-break: break-all;
    line-height: 1.5;
    /* Cegah iOS dari resizing angka */
    -webkit-text-size-adjust: 100%;
    /* Cegah auto-selection yang mungkin trigger format */
    -webkit-user-select: text;
    user-select: text;
}

/* Blokir auto-link tel: jika browser/plugin memaksanya muncul */
.lxwdk-copas-text-display a[href^="tel"],
.lxwdk-copas-text-display a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none !important;
}

/* Raw text span — pastikan teks tampil apa adanya */
.lxwdk-copas-raw-text {
    display: inline;
    font-variant-numeric: tabular-nums;
    /* lebar digit konsisten */
}

/* ── Copas Button ──────────────────────────────────────────── */
.lxwdk-copas-btn {
    display: inline-flex;
    /* default: auto size — width class overrides ini */
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    /* width TIDAK di-set di sini — diatur oleh prefix_class (full/auto) */
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: #4caf50;
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    box-sizing: border-box;
}

.lxwdk-copas-btn:hover {
    background-color: #43a047;
    transform: translateY(-1px);
}

.lxwdk-copas-btn:active {
    transform: translateY(0);
}

/* Success state */
.lxwdk-copas-btn.is-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
    pointer-events: none;
}

/* ── Copy Icon SVG ─────────────────────────────────────────── */
.lxwdk-copas-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    stroke: currentColor;
}

/* ── Button width modes (prefix_class: lxwdk-copas-btn-) ─────── */

/* Full width */
.lxwdk-copas-btn-full .lxwdk-copas-btn {
    display: flex !important;
    width: 100% !important;
}

/* Auto — shrink ke ukuran konten */
.lxwdk-copas-btn-auto .lxwdk-copas-btn {
    display: inline-flex !important;
    width: auto !important;
}

/* ── Button alignment (prefix_class: lxwdk-copas-align-)
   Bekerja pada .lxwdk-copas-content (flex container) ──── */
/* ── Button alignment (prefix_class: lxwdk-copas-align-)
   Target .lxwdk-copas-btn-wrap saja — TIDAK mempengaruhi judul/desc/teks ── */
.lxwdk-copas-align-left .lxwdk-copas-btn-wrap {
    justify-content: flex-start;
}

.lxwdk-copas-align-center .lxwdk-copas-btn-wrap {
    justify-content: center;
}

.lxwdk-copas-align-right .lxwdk-copas-btn-wrap {
    justify-content: flex-end;
}

/* ── Focus ring (accessibility) ────────────────────────────── */
.lxwdk-copas-btn:focus-visible {
    outline: 3px solid rgba(76, 175, 80, 0.5);
    outline-offset: 3px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Auto button biarkan lebar sendiri di mobile juga */
    .lxwdk-copas-btn-auto .lxwdk-copas-btn {
        display: inline-flex !important;
        width: auto !important;
    }
}