/*
 * cc-article.css: מאמרי /CreditCards/ שהגיעו מ-Web Forms (Pages/LegacyArticle.cshtml, M7).
 * -----------------------------------------------------------------------------
 * נטען אחרי /css/modern-article.css ו-/Content/share-bar.css של ההורה. במאסטר של Web Forms המאמר מקבל עוד
 * מ-compareTables.css (פירורי לחם, h1Title/h2Title, supermarkerArticle, עמודת הצד וכפתורי "להשוואה"), והורטיקל
 * לא טוען אותו בכוונה (כופה 980px, תוכנית 4.3). לכן החלקים האלה הועתקו לכאן מ-css/compareTables.css כמו שהם
 * (שורות 687-723, 1041-1046, 4969-4983, 5431-5490, 6125-6255, 6460-6500 והתאמת המובייל 6535-6580), בתחום .cc-article בלבד.
 * המראה צריך להיות זהה למאמר ב-Web Forms, לא "משופר": המאמר עצמו נערך שם.
 * -----------------------------------------------------------------------------
 */

/* ---------- פירורי לחם (compareTables.css 687-723) ---------- */
.cc-article #breadcrumb { margin: 2em 0 2em 0; }
.cc-article ul.breadcrumb { padding: 10px 2px; list-style: none; display: inline; list-style-position: outside; }
.cc-article ul.breadcrumb li { display: inline; color: #17765a; font-size: 14px; font-weight: 700; line-height: 20px; }
.cc-article ul.breadcrumb li + li:before { padding: 4px; color: #17765a; content: "›"; }
.cc-article ul.breadcrumb li a { color: #17765a; text-decoration: none; }
.cc-article ul.breadcrumb li a:hover { color: #01447e; text-decoration: underline; }

/* ---------- כותרות הדף (4969-4983) ---------- */
.cc-article .h1Title { font-family: 'Noto Sans Hebrew', 'Noto Sans Hebrew Fallback', sans-serif; font-size: 20px; }
.cc-article .h2Title { font-family: 'Noto Sans Hebrew', 'Noto Sans Hebrew Fallback', sans-serif; font-size: 16px; text-align: justify; font-weight: normal; line-height: 1.6em; }
.cc-article .h3Heading { font-size: 18px; font-weight: bold; margin-top: 0; vertical-align: middle; }

/* ---------- גוף המאמר (6125-6255) ---------- */
.cc-article .supermarkerArticle { font-family: 'Noto Sans Hebrew', 'Noto Sans Hebrew Fallback', sans-serif; line-height: 1.5; color: #333; max-width: 800px; margin: 0 auto; padding: 5px; }
.cc-article .supermarkerArticle h1 { font-size: 32px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; color: #000; }
.cc-article .supermarkerArticle h2 { font-size: 24px; font-weight: 600; line-height: 1.3; margin-bottom: 15px; color: #000; }
.cc-article .supermarkerArticle h3 { font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 12px; color: #000; }
.cc-article .supermarkerArticle h4 { font-size: 18px; font-weight: 500; line-height: 1.4; margin-bottom: 10px; color: #000; }
.cc-article .supermarkerArticle p { font-size: 16px; line-height: 1.5; margin-bottom: 15px; color: #333; }
.cc-article .supermarkerArticle ul,
.cc-article .supermarkerArticle ol { font-size: 16px; line-height: 1.5; margin-bottom: 15px; padding-right: 20px; color: #333; }
.cc-article .supermarkerArticle a { color: #0066cc; text-decoration: none; transition: color .3s ease; }
.cc-article .supermarkerArticle a:hover { color: #004499; text-decoration: underline; }
.cc-article .supermarkerArticle img { max-width: 100%; height: auto; margin: 20px 0; }
.cc-article .supermarkerArticle table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.cc-article .supermarkerArticle th,
.cc-article .supermarkerArticle td { padding: 10px; border: 1px solid #ddd; }
.cc-article .supermarkerArticle th { background-color: #f5f5f5; font-weight: 600; }
.cc-article .supermarkerArticle label { font: bold 16px arial; }
.cc-article .supermarkerArticle div { text-align: center; }

/* ---------- עמודת הצד: רשימת המאמרים (5431-5490, ומובייל 6535-6580) ---------- */
.cc-article #articleList { list-style: none; margin: 0; padding: 0; }
.cc-article #articleList li { margin-bottom: 10px; }
.cc-article #articleList a { text-decoration: none; color: inherit; display: block; }
.cc-article .article-item { display: flex; align-items: center; background-color: #f7f7f3; padding: 0; flex-direction: row; height: 100px; width: 100%; }
.cc-article .article-item:hover { background-color: #f5f5f5; }
.cc-article .article-image { flex-shrink: 0; margin-left: 10px; }
.cc-article .article-image img { width: 100px; height: 100px; object-fit: cover; }
.cc-article .article-text { flex: 1; text-align: right; padding: 0; height: 100px; display: flex; align-items: center; }
.cc-article .article-text span { font-family: 'Noto Sans Hebrew', 'Noto Sans Hebrew Fallback', sans-serif; font-size: 14px; line-height: 1.6; display: block; overflow-wrap: break-word; }
@media (max-width: 480px) {
    .cc-article .article-item { height: auto; min-height: 60px; padding: 4px; }
    .cc-article .article-image { margin-left: 4px; }
    .cc-article .article-image img { width: 60px; height: 60px; }
    .cc-article .article-text { padding: 0 4px; height: auto; min-height: 60px; }
    .cc-article .article-text span { font-size: 16px; line-height: 1.2; hyphens: auto; }
}

/* ---------- "להשוואת כרטיסי אשראי" (6460-6500) ---------- */
.cc-article #goTo { width: 100%; margin-top: 4em; }
.cc-article #goTo a { text-decoration: none; }
.cc-article .buttonGoTo { display: inline; width: 30%; height: 5em; background-color: #17765a; padding: 2em; margin-left: auto; margin-right: auto; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.cc-article .buttonGoTo1 { margin-right: 1em; }
.cc-article .buttonGoTo:hover { opacity: .9; }
.cc-article .buttonGoTo span { color: #fff; font: bold 20px arial; }
/* ---------- תוכן העניינים "במאמר זה" (compareTables.css 6292-6350). חסר עד 12/11/2026: ב-staging הרשימה יצאה ממורכזת ועם נקודות (רונן) ---------- */
.cc-article .tableOfContent { margin: 2em 0; text-align: right !important; }
.cc-article #tableOfContent { list-style: none; border-right: 2px solid #e0e0e0; margin-right: 1em; padding-right: 0; }
.cc-article #tableOfContent a { text-decoration: none; color: #17765a; }
.cc-article #tableOfContent a:hover { text-decoration: underline; color: #135a47; }
.cc-article #tableOfContent li { margin-bottom: 10px; }
.cc-article #tableOfContent > li { display: flex; align-items: center; flex-wrap: wrap; padding-right: 28px; }
.cc-article #tableOfContent > li > .expandPlus { margin-left: 8px; order: 1; }
.cc-article #tableOfContent > li > a { order: 2; flex: 1; margin-right: 28px; }
.cc-article #tableOfContent > li > .expandPlus + a { margin-right: 0; }
.cc-article #tableOfContent > li > ul { order: 3; width: 100%; margin-right: 1.5em; margin-top: .5em; margin-bottom: .5em; }
.cc-article #tableOfContent ul li { margin-bottom: 8px; }
.cc-article.sm-modern-article.sm-article-rhythm .tableOfContent, .cc-article .sm-modern-article.sm-article-rhythm .tableOfContent { margin-bottom: 1.75rem; }

@media (max-width: 767px) {
    /* בטלפון שני הכפתורים לא נכנסים בשורה אחת ב-padding של 2em (ב-Web Forms הם נשברים לשורות, כאן אותו דבר בלי גלילה אופקית) */
    .cc-article #goTo { display: flex; flex-direction: column; gap: 1.25em; }
    .cc-article #goTo .buttonGoTo { display: block; width: auto; height: auto; padding: 1em; margin: 0; text-align: center; }
}