/* ========================================================
   עיצוב דף קורסים דיגיטליים (חנות קורסים)
   ======================================================== */

.courses-store-body {
    background-color: var(--bg-body);
}

.store-main-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 5%;
}

/* --- בלוק עליון (כותרת וחיפוש) --- */
.cs-top-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 40px;
    border-radius: 40px; /* פינות סופר עגולות */
    box-shadow: var(--shadow-soft);
    margin-bottom: 50px;
    flex-wrap: wrap;
    gap: 30px;
    border: 3px solid rgba(110, 211, 207, 0.1);
}

.cs-top-right {
    flex: 1;
    min-width: 300px;
}

.cs-main-title {
    font-size: 2.8rem;
    color: var(--primary);
    font-weight: 900;
    margin: 0 0 5px 0;
}

.cs-subtitle {
    font-size: 1.2rem;
    color: var(--text-light);
    margin: 0 0 20px 0;
    font-weight: bold;
}

.cs-consult-btn {
    font-size: 1.1rem;
    padding: 15px 35px;
    background-color: #25d366; /* צבע וואטסאפ מיוחד לשיחת התאמה */
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}
.cs-consult-btn:hover {
    background-color: #1da851;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

.cs-top-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 300px;
    align-items: flex-end;
}

.cs-search-box {
    position: relative;
    width: 100%;
    max-width: 350px;
}
.cs-search-box input {
    width: 100%;
    padding: 15px 45px 15px 20px;
    border-radius: 50px; /* הכל עגול */
    border: 2px solid #eee;
    font-size: 1.05rem;
    background: var(--bg-body);
}
.cs-search-box input:focus { background: white; border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(110, 211, 207, 0.2); }
.cs-search-box i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 1.2rem; }

.cs-filter-select {
    width: 100%;
    max-width: 350px;
    padding: 15px 20px;
    border-radius: 50px;
    border: 2px solid #eee;
    font-size: 1.05rem;
    background: white;
    color: var(--text-dark);
    font-weight: bold;
    cursor: pointer;
}
.cs-filter-select:focus { border-color: var(--accent); }


/* --- גריד קורסים (כרטיסיות) --- */
.cs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 35px;
}

.cs-card {
    background: white;
    border-radius: 40px; /* פינות סופר עגולות למלבנים */
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border: 3px solid var(--primary) !important;
}
.cs-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(242, 166, 90, 0.3) !important; /* מסגרת כתומה בהובר */
}

.cs-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: var(--bg-light);
}

.cs-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cs-card-title {
    font-size: 1.6rem;
    color: var(--primary);
    font-weight: 800;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.cs-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
}
.cs-card-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 1.05rem;
    color: var(--text-dark);
    font-weight: 600;
}
.cs-card-bullets li i {
    color: var(--accent); /* צבע כתום */
    margin-top: 5px;
}

.cs-card-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}
.cs-card-meta .tag { padding: 6px 15px; border-radius: 20px; font-size: 0.85rem; }

.cs-card-btn {
    width: 100%;
    padding: 15px;
    border-radius: 50px;
    font-size: 1.1rem;
    background: var(--bg-light);
    color: var(--primary);
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.cs-card:hover .cs-card-btn {
    background: var(--primary);
    color: white;
}


/* --- עמוד קורס בודד (Single View) --- */
.cs-single-view {
    animation: fadeIn 0.4s ease;
    background-color: #EBF8F7; /* צבע טורקיז-תכלת סופר עדין (לא זוהר מדי) */
    padding: 40px;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.cs-back-btn {
    margin-bottom: 30px;
    border-radius: 50px;
    background: white; /* הדגשת הכפתור על הרקע התכלת */
}

/* כותרת קורס עם באנר תמונה */
.cs-single-header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    border-radius: 40px;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-color: var(--primary);
    overflow: hidden;
    border: 4px solid var(--primary);
    box-shadow: var(--shadow-soft);
}

.sc-header-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(90, 45, 130, 0.85), rgba(110, 211, 207, 0.6));
    z-index: 1;
}

.sc-header-content {
    position: relative;
    z-index: 2;
    padding: 30px;
}

.sc-title {
    font-size: 4rem;
    color: var(--white);
    font-weight: 900;
    margin: 0 0 20px 0;
    text-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.sc-badges { display: flex; justify-content: center; gap: 15px; }

/* רקע "קישקוש" מוגזם, תלת-מימדי סופר-סוני */
.sc-content-box {
    background: white;
    padding: 40px;
    border-radius: 40px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.sc-waves-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    opacity: 0.22; /* שקיפות מותאמת כדי שזה ייראה מדהים אבל קריא */
    pointer-events: none;
    /* ה-SVG המוגזם עם שכבות עבות (Stroke), זוהר תלת-ממדי (Glow) והרבה תווים בגדלים שונים */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235A2D82'/%3E%3Cstop offset='50%25' stop-color='%236ED3CF'/%3E%3Cstop offset='100%25' stop-color='%23F2A65A'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23F2A65A'/%3E%3Cstop offset='50%25' stop-color='%235A2D82'/%3E%3Cstop offset='100%25' stop-color='%236ED3CF'/%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='8' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' filter='url(%23glow)'%3E%3Cpath d='M-100,500 Q400,100 1000,500 T2100,500' stroke='url(%23g1)' stroke-width='10' opacity='0.3'/%3E%3Cpath d='M-100,485 Q400,85 1000,485 T2100,485' stroke='url(%23g1)' stroke-width='12' opacity='0.5'/%3E%3Cpath d='M-100,470 Q400,70 1000,470 T2100,470' stroke='url(%23g1)' stroke-width='15' opacity='0.7'/%3E%3Cpath d='M-100,455 Q400,55 1000,455 T2100,455' stroke='url(%23g1)' stroke-width='8' opacity='1'/%3E%3Cpath d='M-100,800 Q500,1100 1200,700 T2100,700' stroke='url(%23g2)' stroke-width='15' opacity='0.4'/%3E%3Cpath d='M-100,780 Q500,1080 1200,680 T2100,680' stroke='url(%23g2)' stroke-width='10' opacity='0.7'/%3E%3Cpath d='M-100,760 Q500,1060 1200,660 T2100,660' stroke='url(%23g2)' stroke-width='5' opacity='1'/%3E%3Cpath d='M-100,300 Q600,-50 1100,400 T2100,300' stroke='url(%23g1)' stroke-width='20' opacity='0.2'/%3E%3Cpath d='M-100,280 Q600,-70 1100,380 T2100,280' stroke='url(%23g1)' stroke-width='12' opacity='0.5'/%3E%3Cpath d='M-100,260 Q600,-90 1100,360 T2100,260' stroke='url(%23g1)' stroke-width='6' opacity='0.9'/%3E%3C/g%3E%3Cg font-family='Arial' font-weight='bold' filter='url(%23glow)' opacity='0.6'%3E%3Ctext x='200' y='300' font-size='80' fill='%235A2D82'%3E%26%239835;%3C/text%3E%3Ctext x='800' y='700' font-size='80' fill='%236ED3CF'%3E%26%239834;%3C/text%3E%3Ctext x='1400' y='400' font-size='80' fill='%23F2A65A'%3E%26%239835;%3C/text%3E%3Ctext x='500' y='800' font-size='80' fill='%235A2D82'%3E%26%239834;%3C/text%3E%3Ctext x='1100' y='200' font-size='80' fill='%23F2A65A'%3E%26%239834;%3C/text%3E%3Ctext x='1700' y='800' font-size='80' fill='%235A2D82'%3E%26%239835;%3C/text%3E%3Ctext x='1800' y='300' font-size='80' fill='%236ED3CF'%3E%26%239834;%3C/text%3E%3Ctext x='150' y='650' font-size='80' fill='%23F2A65A'%3E%26%239835;%3C/text%3E%3Ctext x='950' y='900' font-size='80' fill='%236ED3CF'%3E%26%239835;%3C/text%3E%3Ctext x='350' y='150' font-size='40' fill='%23F2A65A' opacity='0.8'%3E%26%239834;%3C/text%3E%3Ctext x='1250' y='850' font-size='120' fill='%235A2D82' opacity='0.4'%3E%26%239835;%3C/text%3E%3Ctext x='1600' y='150' font-size='50' fill='%236ED3CF' opacity='0.9'%3E%26%239834;%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.sc-content-inner {
    position: relative;
    z-index: 2; /* מוודא שהטקסט מעל הרקע המאויר */
}

.sc-section-title {
    color: var(--accent);
    font-size: 1.6rem;
    margin: 0 0 15px 0;
    border-bottom: 3px dashed var(--bg-light);
    padding-bottom: 10px;
    display: inline-block;
}

.sc-desc-text {
    font-size: 1.25rem;
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 20px;
}

.sc-read-more-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.sc-extra-info {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-top: 30px;
    border-top: 2px solid var(--bg-light);
    animation: fadeIn 0.4s ease;
}

.sc-info-block h4 {
    color: var(--secondary);
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sc-info-block p { margin: 0; color: var(--text-dark); line-height: 1.6; font-size: 1.1rem;}

.sc-syllabus-box {
    background: var(--bg-light);
    padding: 40px;
    border-radius: 40px;
    margin-bottom: 40px;
}

.sc-syllabus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* עיצוב רשימת סילבוס כמו בוורד אבל מודרני ועגול */
.sc-syllabus-list li {
    background: white;
    padding: 20px 25px;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.sc-syllabus-list li::before {
    content: '\f144'; /* אייקון של פליי FontAwesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--accent);
    margin-left: 15px;
    font-size: 1.5rem;
}

.sc-purchase-box {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    padding: 40px;
    border-radius: 40px;
    text-align: center;
    color: white;
    box-shadow: 0 15px 40px rgba(90, 45, 130, 0.3);
    margin-bottom: 40px;
}

.sc-price-display {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.sc-price-display .sc-currency { font-size: 2rem; opacity: 0.8; font-weight: normal;}

.sc-buy-btn {
    font-size: 1.5rem;
    padding: 20px 50px;
    background: var(--accent);
    color: white;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(242, 166, 90, 0.4);
}
.sc-buy-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-3px) scale(1.05);
}

@media (max-width: 768px) {
    .cs-top-block { flex-direction: column; text-align: center; padding: 25px; }
    .cs-top-left { align-items: center; width: 100%; }
    .cs-main-title { font-size: 2.2rem; }
    .sc-title { font-size: 2.5rem; }
    .cs-single-view { padding: 15px; } /* התאמת פדינג במובייל למסגרת הטורקיז */
    .cs-single-header { min-height: 200px; border-radius: 30px; margin-bottom: 30px; }
    .sc-extra-info { grid-template-columns: 1fr; }
    .sc-content-box, .sc-syllabus-box, .sc-purchase-box { padding: 25px; border-radius: 30px; }
    .sc-price-display { font-size: 3rem; }
    .sc-buy-btn { width: 100%; font-size: 1.2rem; padding: 15px; }
}