/* ═══════════════════════════════════════════════════════════════════
   WP Licenses Manager — "تراخيصي" (My Licenses) — Storefront design v1.5.0
   نفس هوية لوحة التحكم — طبّق هنا كمان عشان التجربة موحدة
   ═══════════════════════════════════════════════════════════════════ */

.wplm-customer-licenses {
    --wplm-brand:      #2271B1;
    --wplm-brand-deep: #135E96;
    --wplm-ink:        #0C2A42;
    --wplm-success:    #1E9E6A;
    --wplm-warning:    #B45309;
    --wplm-warning-bg: #FFF7E8;
    --wplm-danger:     #C42B3D;
    --wplm-danger-bg:  #FCEEF0;
    --wplm-info-bg:    #EAF3FB;
    --wplm-success-bg: #E8F7F0;
    --wplm-surface:    #F4F7FA;
    --wplm-card:       #FFFFFF;
    --wplm-line:       #DDE5EC;
    --wplm-line-soft:  #ECF1F5;
    --wplm-muted:      #5B6B7B;
    --wplm-text:       #1C2B39;
    --wplm-radius:     14px;
    --wplm-radius-sm:  9px;
    --wplm-shadow:     0 1px 2px rgba(12,42,66,.06), 0 6px 18px rgba(12,42,66,.06);
    --wplm-shadow-lift:0 10px 26px rgba(12,42,66,.12);
    --wplm-font:       "Tajawal", -apple-system, "Segoe UI", Tahoma, sans-serif;
    --wplm-mono:       ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

    direction: rtl;
    text-align: right;
    font-family: var(--wplm-font);
    color: var(--wplm-text);
    margin: 8px 0 30px;
}

/* ── رأس الصفحة ─────────────────────────────────────────────────── */
.wplm-cl-header {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--wplm-ink) 0%, var(--wplm-brand-deep) 55%, var(--wplm-brand) 100%);
    color: #fff;
    border-radius: var(--wplm-radius);
    padding: 22px 24px;
    margin-bottom: 22px;
    box-shadow: var(--wplm-shadow);
}
.wplm-cl-header__icon {
    width: 46px; height: 46px; flex: 0 0 46px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
}
.wplm-cl-header__icon svg { width: 26px; height: 26px; }
.wplm-cl-header h2 {
    margin: 0; font-size: 20px; font-weight: 800; color: #fff; font-family: var(--wplm-font);
}
.wplm-cl-header p {
    margin: 3px 0 0; font-size: 13px; color: rgba(255,255,255,.78);
}
.wplm-cl-header__spacer { flex: 1; }
.wplm-cl-header__count {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px; font-weight: 700;
    white-space: nowrap;
}

/* ── حالة الفراغ ────────────────────────────────────────────────── */
.wplm-customer-licenses .woocommerce-info,
.wplm-cl-empty {
    background: var(--wplm-card);
    border: 1px dashed var(--wplm-line);
    border-radius: var(--wplm-radius);
    padding: 40px 20px;
    text-align: center;
    color: var(--wplm-muted);
    font-size: 14px;
}

/* ── الشبكة والبطاقات ───────────────────────────────────────────── */
.wplm-licenses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.wplm-license-card {
    background: var(--wplm-card);
    border: 1px solid var(--wplm-line-soft);
    border-radius: var(--wplm-radius);
    box-shadow: var(--wplm-shadow);
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.wplm-license-card::before {
    content: "";
    position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--wplm-success);
}
.wplm-license-card.license-expired::before { background: var(--wplm-danger); }
.wplm-license-card.license-renewed::before  { background: var(--wplm-brand); }
.wplm-license-card:hover { box-shadow: var(--wplm-shadow-lift); transform: translateY(-2px); }
.wplm-license-card.license-expired { opacity: .85; }

.license-header {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 16px; padding-bottom: 14px;
    border-bottom: 1px solid var(--wplm-line-soft);
}
.license-image { flex: 0 0 auto; }
.license-image img {
    width: 48px; height: 48px; object-fit: cover;
    border-radius: 10px; border: 1px solid var(--wplm-line-soft);
    display: block;
}
.license-title { min-width: 0; flex: 1; }
.license-title h3 {
    margin: 0 0 6px; font-size: 15.5px; font-weight: 800;
    color: var(--wplm-ink); font-family: var(--wplm-font);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.license-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.status-active  { background: var(--wplm-success-bg); color: #14724D; }
.status-expired { background: var(--wplm-danger-bg);  color: #9C2231; }
.status-info    { background: var(--wplm-info-bg);    color: var(--wplm-brand-deep); }

.license-details { margin-bottom: 16px; }
.detail-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--wplm-line-soft);
    font-size: 13px;
}
.detail-item:last-child { border-bottom: 0; }
.detail-label { color: var(--wplm-muted); font-weight: 600; flex: 0 0 auto; }
.detail-value { text-align: left; direction: ltr; }
.wplm-domain-plate {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%;
}
.detail-value code {
    direction: ltr; unicode-bidi: embed;
    font-family: var(--wplm-mono); font-size: 12px; font-weight: 600;
    color: var(--wplm-ink);
    background: linear-gradient(180deg, #FDFEFF, #F1F6FB);
    border: 1px solid #C9D8E6; border-bottom-width: 2px;
    border-radius: 6px; padding: 3px 8px;
    overflow-wrap: anywhere; white-space: normal; line-height: 1.3;
}
.detail-value code:empty::after { content: "—"; color: var(--wplm-muted); font-family: var(--wplm-font); }
.wplm-copy-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border: 1px solid var(--wplm-line);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    color: var(--wplm-muted);
    transition: border-color .12s ease, color .12s ease, background .12s ease;
    padding: 0;
}
.wplm-copy-btn:hover { border-color: var(--wplm-brand); color: var(--wplm-brand-deep); background: var(--wplm-info-bg); }
.wplm-copy-btn.is-copied { border-color: var(--wplm-success); background: var(--wplm-success-bg); }

.badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.badge-success { background: var(--wplm-success-bg); color: #14724D; }
.badge-warning { background: var(--wplm-warning-bg); color: #8A4B06; }
.badge-info    { background: var(--wplm-info-bg);    color: var(--wplm-brand-deep); }

.days-remaining { font-size: 11.5px; display: inline-block; margin-top: 3px; }
.text-danger  { color: var(--wplm-danger); font-weight: 700; }
.text-warning { color: var(--wplm-warning); font-weight: 700; }

.license-actions { display: flex; gap: 8px; }
.license-actions .button {
    flex: 1; text-align: center;
    border-radius: var(--wplm-radius-sm);
    font-family: var(--wplm-font); font-weight: 700; font-size: 12.5px;
    border: 1.5px solid var(--wplm-line);
    background: #fff; color: var(--wplm-ink);
    padding: 9px 10px;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.license-actions .button:hover { border-color: var(--wplm-brand); color: var(--wplm-brand-deep); }
.license-actions .button.button-primary {
    background: var(--wplm-brand); border-color: var(--wplm-brand-deep); color: #fff;
}
.license-actions .button.button-primary:hover { background: var(--wplm-brand-deep); }

/* ── تغيير الدومين ──────────────────────────────────────────────── */
.wplm-domain-change {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed var(--wplm-line);
}
.wplm-dc-pending {
    background: var(--wplm-warning-bg);
    border: 1px solid #F4DCB0;
    color: #7c2d12;
    border-radius: var(--wplm-radius-sm);
    padding: 10px 12px;
    font-size: 12.5px; line-height: 1.7;
}
.wplm-dc-pending code {
    background: #fff; padding: 1px 6px; border-radius: 4px;
    font-family: var(--wplm-mono);
}
.wplm-dc-toggle {
    width: 100%; border-radius: var(--wplm-radius-sm);
    font-family: var(--wplm-font); font-weight: 700; font-size: 12.5px;
    border: 1.5px dashed var(--wplm-brand);
    background: var(--wplm-info-bg); color: var(--wplm-brand-deep);
    padding: 9px; cursor: pointer;
}
.wplm-dc-toggle:hover { background: #E0EEF9; }
.wplm-dc-hint { font-size: 12.5px; color: var(--wplm-muted); margin: 10px 0; line-height: 1.7; }
.wplm-dc-input {
    width: 100%; padding: 9px 11px;
    border: 1.5px solid var(--wplm-line); border-radius: var(--wplm-radius-sm);
    margin-bottom: 10px; direction: ltr; text-align: left;
    font-family: var(--wplm-mono); font-size: 13px;
}
.wplm-dc-input:focus {
    outline: none; border-color: var(--wplm-brand);
    box-shadow: 0 0 0 3px rgba(34,113,177,.15);
}
.wplm-dc-actions { display: flex; gap: 8px; }
.wplm-dc-actions .button { flex: 1; }
.wplm-dc-msg { margin-top: 10px; padding: 8px 12px; border-radius: var(--wplm-radius-sm); font-size: 12.5px; }
.wplm-dc-msg.success { background: var(--wplm-success-bg); color: #14724D; }
.wplm-dc-msg.error   { background: var(--wplm-danger-bg);  color: #9C2231; }

/* ── شريط الفلاتر والبحث ────────────────────────────────────────── */
.wplm-cl-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.wplm-cl-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.wplm-cl-filter {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--wplm-card);
    border: 1px solid var(--wplm-line);
    color: var(--wplm-muted);
    font-family: var(--wplm-font); font-weight: 700; font-size: 12.5px;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.wplm-cl-filter:hover { border-color: var(--wplm-brand); color: var(--wplm-brand-deep); }
.wplm-cl-filter.is-active {
    background: var(--wplm-ink); border-color: var(--wplm-ink); color: #fff;
}
.wplm-cl-count {
    background: rgba(0,0,0,.08);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
}
.wplm-cl-filter.is-active .wplm-cl-count { background: rgba(255,255,255,.22); }

.wplm-cl-search {
    position: relative;
    flex: 0 1 240px;
    min-width: 180px;
}
.wplm-cl-search__icon {
    position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
    font-size: 13px; opacity: .55; pointer-events: none;
}
.wplm-cl-search input {
    width: 100%; box-sizing: border-box;
    padding: 9px 34px 9px 12px;
    border: 1.5px solid var(--wplm-line); border-radius: 999px;
    font-family: var(--wplm-font); font-size: 13px;
    background: var(--wplm-card); color: var(--wplm-text);
}
.wplm-cl-search input:focus {
    outline: none; border-color: var(--wplm-brand);
    box-shadow: 0 0 0 3px rgba(34,113,177,.15);
}
.wplm-cl-empty-filtered {
    text-align: center; color: var(--wplm-muted);
    font-size: 13.5px; padding: 30px 10px;
}

@media (max-width: 600px) {
    .wplm-cl-toolbar { flex-direction: column; align-items: stretch; }
    .wplm-cl-search { flex: 1; }
}

/* ── تجاوب ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .wplm-licenses-grid { grid-template-columns: 1fr; }
    .wplm-cl-header { padding: 16px 18px; }
    .wplm-cl-header h2 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .wplm-license-card { transition: none; }
}