/**
 * Co-WP Downloads — Frontend Styles v2.0.0
 * Author: goBrilliant
 *
 *  - .wcsd-progress-container : "Download All" panel rendered above the WC table
 *  - Unicode / Bangla font stack added to .wcsd-file-name
 *    so Bangla characters render correctly in all browsers
 *
 * @package WC_Silent_Downloads
 */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
    --wcsd-accent:       #2563eb;
    --wcsd-accent-dark:  #1d4ed8;
    --wcsd-success:      #16a34a;
    --wcsd-error:        #dc2626;
    --wcsd-bg:           #f8fafc;
    --wcsd-border:       #e2e8f0;
    --wcsd-text:         #1e293b;
    --wcsd-text-muted:   #64748b;
    --wcsd-radius:       8px;
    --wcsd-bar-h:        6px;
    --wcsd-ease:         0.22s ease;
    /* Bangla + Unicode font stack — ensures Bangla glyphs render everywhere */
    --wcsd-font:         'Noto Sans Bengali', 'SolaimanLipi', 'Kalpurush',
                         -apple-system, BlinkMacSystemFont, 'Segoe UI',
                         sans-serif, 'Noto Sans';
}


/* Spinner for downloading state */
@keyframes wcsd-spin {
    to { transform: rotate(360deg); }
}

/* ── Progress Panel (above the table) ─────────────────────── */

.wcsd-progress-container {
    font-family:   var(--wcsd-font);
    background:    var(--wcsd-bg);
    border:        1px solid var(--wcsd-border);
    border-radius: var(--wcsd-radius);
    padding:       18px 22px;
    margin-top:    0;
    margin-bottom: 16px;  /* gap between panel and the downloads table below */
    box-sizing:    border-box;
}

/* ── Download All Button ───────────────────────────────────── */
.wcsd-dl-all-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        10px 22px;
    background:     var(--wcsd-accent);
    color:          #fff;
    border:         none;
    border-radius:  var(--wcsd-radius);
    font-family:    var(--wcsd-font);
    font-size:      0.9rem;
    font-weight:    700;
    cursor:         pointer;
    letter-spacing: 0.01em;
    transition:     background var(--wcsd-ease), transform var(--wcsd-ease);
    margin-bottom:  14px;
}

.wcsd-dl-all-btn__icon {
    font-size: 1.05em;
}

.wcsd-dl-all-btn:hover:not(:disabled) {
    background: var(--wcsd-accent-dark);
    transform:  translateY(-1px);
}

.wcsd-dl-all-btn:disabled,
.wcsd-dl-all-btn--active {
    opacity: 0.6;
    cursor:  not-allowed;
    transform: none !important;
}

/* ── File Progress List ────────────────────────────────────── */
.wcsd-file-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.wcsd-file-row {
    display:     grid;
    /* filename | progress bar | % badge */
    grid-template-columns: 1fr 120px 52px;
    align-items: center;
    gap:         10px;
    padding:     9px 12px;
    background:  #fff;
    border:      1px solid var(--wcsd-border);
    border-radius: calc( var(--wcsd-radius) - 2px );
    transition:  border-color var(--wcsd-ease), box-shadow var(--wcsd-ease);
}

@media ( max-width: 500px ) {
    .wcsd-file-row { grid-template-columns: 1fr; }
    .wcsd-bar-wrap,
    .wcsd-status-badge { display: none; }
}

.wcsd-file-row.wcsd-downloading {
    border-color: var(--wcsd-accent);
    box-shadow:   0 0 0 3px rgba( 37, 99, 235, 0.1 );
}

.wcsd-file-row.wcsd-done  { border-color: var(--wcsd-success); }
.wcsd-file-row.wcsd-error { border-color: var(--wcsd-error); }

/* ── File Name (supports Bangla) ──────────────────────────── */
.wcsd-file-name {
    font-family:   var(--wcsd-font);
    font-size:     0.875rem;
    font-weight:   500;
    color:         var(--wcsd-text);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    /* Ensure proper Bangla shaping in all engines */
    unicode-bidi:  plaintext;
    direction:     ltr;   /* override if site is RTL via selector below */
}

/* If the page is set to RTL (Bengali can be LTR, but keep this for safety) */
[dir="rtl"] .wcsd-file-name { direction: rtl; }

/* ── Progress Bar ──────────────────────────────────────────── */
.wcsd-bar-wrap {
    height:       var(--wcsd-bar-h);
    background:   var(--wcsd-border);
    border-radius: 999px;
    overflow:     hidden;
}

.wcsd-bar {
    height:       100%;
    width:        0%;
    background:   var(--wcsd-accent);
    border-radius: 999px;
    transition:   width 0.3s ease;
    will-change:  width;
}

.wcsd-file-row.wcsd-done  .wcsd-bar { background: var(--wcsd-success); width: 100%; }
.wcsd-file-row.wcsd-error .wcsd-bar { background: var(--wcsd-error);   width: 100%; }

/* ── Status Badge ──────────────────────────────────────────── */
.wcsd-status-badge {
    display:     inline-block;
    padding:     2px 7px;
    border-radius: 999px;
    font-size:   0.7rem;
    font-weight: 700;
    white-space: nowrap;
    min-width:   36px;
    text-align:  center;
}

.wcsd-status-badge--progress {
    background: rgba( 37, 99, 235, 0.1 );
    color:      var(--wcsd-accent);
}

.wcsd-status-badge--done {
    background: rgba( 22, 163, 74, 0.12 );
    color:      var(--wcsd-success);
}

.wcsd-status-badge--error {
    background: rgba( 220, 38, 38, 0.1 );
    color:      var(--wcsd-error);
}

/* ── All Done Message ──────────────────────────────────────── */
.wcsd-all-done {
    margin:      14px 0 0;
    padding:     10px 14px;
    background:  rgba( 22, 163, 74, 0.08 );
    border:      1px solid rgba( 22, 163, 74, 0.25 );
    border-radius: var(--wcsd-radius);
    color:       var(--wcsd-success);
    font-family: var(--wcsd-font);
    font-size:   0.9rem;
    font-weight: 600;
    text-align:  center;
}

/* ── Original WC download anchor ──────────────────────────── */
/*
 * .wcsd-wired is applied by JS to intercept the click and trigger
 * a silent AJAX download instead of a page navigation.
 * The link stays visible — we do NOT inject replacement buttons
 * into the table, so the anchor is the user's only per-file control.
 */
a.wcsd-wired {
    /* Visible — click is silently intercepted by the JS queue */
}

/* ── Elementor Widget — editor placeholder ─────────────────── */

/*
 * Shown only while editing in Elementor. On live pages the JS mounts
 * the real .wcsd-progress-container inside .wcsd-elementor-widget.
 */
.wcsd-elementor-placeholder {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         28px 20px;
    background:      #eff6ff;
    border:          2px dashed #2563eb;
    border-radius:   var(--wcsd-radius);
    color:           #1d4ed8;
    text-align:      center;
    font-family:     var(--wcsd-font);
}

.wcsd-elementor-placeholder__icon {
    font-size: 2rem;
    line-height: 1;
}

.wcsd-elementor-placeholder__label {
    font-weight: 700;
    font-size:   1rem;
}

.wcsd-elementor-placeholder small {
    color:       #64748b;
    font-size:   0.8rem;
    line-height: 1.5;
}

/* When mounted via the Elementor widget, the container already has
   padding from the widget wrapper — remove double-spacing. */
.wcsd-elementor-widget > .wcsd-progress-container {
    margin-bottom: 0;
}