/* تحسينات عامة لترتيب واجهة الـ Article Builder */
#ftag-admin-options {
    direction: rtl;
    background: #ffffff;
    padding: 16px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}

#ftag-admin-options h3 {
    margin-top: 0;
    color: #2c3e50;
    font-size: 20px;
}

/* grouped fieldsets using details */
.ftag-fieldset {
    border: 1px solid #eef0f2;
    padding: 8px 12px 12px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #fbfbfb;
    transition: box-shadow .15s ease, transform .08s ease;
}
.ftag-fieldset summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}
.ftag-fieldset[open] {
    box-shadow: 0 6px 18px rgba(18,38,63,0.06);
}

/* add a chevron using ::marker fallback if needed */
.ftag-fieldset summary::after {
    content: "▾";
    margin-left: auto;
    font-size: 12px;
    color: #666;
    transition: transform .15s ease;
}
.ftag-fieldset[open] summary::after {
    transform: rotate(180deg);
}

/* layout grid */
#ftag-admin-options .ftag-row {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-start;
    margin-bottom:10px;
}
#ftag-admin-options .ftag-col {
    flex:1 1 220px;
    min-width:180px;
}
#ftag-admin-options .sections-col {
    flex:1 1 320px;
}

/* inputs */
.custom-dropdown,
#customIntro,
#ftag-admin-options textarea,
#ftag-admin-options input[type="text"],
#ftag-admin-options input[type="url"] {
    width:100%;
    padding:8px;
    border:1px solid #ddd;
    border-radius:6px;
    box-sizing:border-box;
    background: #fff;
    font-size: 14px;
}

/* compact checkboxes */
.checkbox-row label {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-right:8px;
}

/* buttons */
.create-article {
    background:#0073aa;
    color:#fff;
    border:none;
    padding:8px 12px;
    border-radius:6px;
    cursor:pointer;
}
.create-article:hover { background:#005a87; }

/* blocks preview */
.ftag-block-preview {
    padding:10px;
    border:1px solid #eef0f2;
    border-radius:6px;
    margin-bottom:8px;
    background:#fff;
    display:flex;
    gap:12px;
    align-items:flex-start;
}
.ftag-block-preview .block-meta { flex:1; }
.ftag-block-preview .block-actions { display:flex; gap:6px; }

/* small utilities */
.block-sample-list { margin:6px 0 0 18px; color:#333; font-size:13px; }
.block-items-count-display { font-size:13px; color:#666; margin-bottom:6px; }

/* adjust details/fieldsets on small screens */
@media (max-width:900px) {
    #ftag-admin-options .ftag-row { flex-direction:column; }
    .ftag-block-preview { flex-direction:column; }
}

/* nicer look for the tool paragraph */
.block-tool-paragraph {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15px;
  color: #333;
  background-color: #f7f9fb;
  padding: 12px 16px;
  border-radius: 6px;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.block-tool-paragraph .block-tool-link {
  color: #0078d4;
  text-decoration: none;
  font-weight: 600;
  margin-left: 6px;
  transition: color 0.25s ease;
}

.block-tool-paragraph .block-tool-link:hover {
  color: #005a9e;
  text-decoration: underline;
}

/* subtle focus styles */
#ftag-admin-options input:focus,
#ftag-admin-options textarea:focus,
#ftag-admin-options select:focus,
#ftag-admin-options summary:focus {
    outline: 3px solid rgba(0,115,170,0.12);
    outline-offset: 2px;
    border-radius: 6px;
}

/* summary accessible hit area */
.ftag-fieldset summary {
    padding: 8px;
    border-radius: 6px;
}

/* hide default marker on some browsers */
.ftag-fieldset summary::-webkit-details-marker { display:none; }

/* ensure small text inputs scale on mobile */
.small-text { width: 90px; }

/* description text */
#ftag-admin-options .description { color:#666; font-size:13px; margin-top:6px; }

/* popup message adjustments (keeps original position but sleeker) */
#ftag-popup-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #fff;
    border-left: 4px solid #46b450;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    z-index: 10000;
    max-width: 360px;
}
#ftag-popup-message.error { border-left-color: #dc3232; }

/* ---------------------------
   Styles for paired table & chips
   --------------------------- */

/* make table look clean in post content too */
/* keep both old class and new generic class so changing class_map won't break styles */
.fancy-paired-table, .paired-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-family: inherit;
    font-size: 15px;
    background: transparent;
}

.fancy-paired-table thead th, .paired-table thead th {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid #e6e6e6;
    font-weight: 600;
    color: #222;
    background: #fafafa;
}

.fancy-paired-table tbody td, .paired-table tbody td {
    padding: 10px 8px;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: middle;
}

/* cell holding styled items: allow wrapping and spacing */
/* old name .ftag-copy-chip and generic .copy-chip */
.fancy-paired-table .ftag-copy-chip,
.fancy-paired-table .copy-chip,
.paired-table .ftag-copy-chip,
.paired-table .copy-chip {
    display: inline-block;
    margin: 4px 6px 4px 0;
}

/* appearance of the copy-chip buttons (pills) */
/* both selectors to be robust */
.ftag-copy-chip, .copy-chip {
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.06);
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    font-size: 0.95rem;
    line-height: 1;
    transition: background .12s ease, transform .06s ease;
    -webkit-user-select: none;
    user-select: none;
}

/* subtle hover + focus */
.ftag-copy-chip:hover,
.ftag-copy-chip:focus,
.copy-chip:hover,
.copy-chip:focus {
    background: #f3f7fb;
    transform: translateY(-1px);
    outline: none;
}

/* visual feedback when clicked (temporary) */
.ftag-copy-chip:active, .copy-chip:active {
    transform: translateY(0);
}

/* responsive: allow chips to wrap nicely on small screens */
@media (max-width:600px) {
    .fancy-paired-table tbody td, .paired-table tbody td { padding: 8px 6px; }
    .ftag-copy-chip, .copy-chip { padding: 6px 8px; font-size: 0.92rem; }
}

/* ensure long decorated strings break nicely instead of overflowing */
.ftag-copy-chip, .copy-chip {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* if you want to provide a custom theme in future (example) */
.ftag-copy-chip.theme-dark, .copy-chip.theme-dark {
    background:#111;
    color:#fff;
    border-color: rgba(255,255,255,0.06);
}

/* Additional mapping for article classes (old <-> new generic) */
.ftag-main-content, .content-main { margin: 10px 0 18px 0; }
.article-intro, .lead-paragraph { font-size: 16px; line-height: 1.6; color: #222; margin-bottom: 12px; }
.article-custom-paragraph, .article-custom-paragraph { margin-bottom: 14px; color:#333; }

/* card / grid / list generic classes mapping */
.fancy-card, .fancy-card { padding:8px; border-radius:6px; background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,0.03); margin:6px; display:inline-block; }
.fancy-grid, .fancy-grid, .fancy-list, .fancy-list { margin:8px 0; }

/* ensure the CTA style maps */
.article-cta, .article-cta { background:#f8fafc; padding:12px; border-radius:6px; margin-top:12px; border:1px solid #eee; }