/* =========================================
   קובץ עיצוב ראשי (CSS) - חזי באר
   ========================================= */

/* --- 1. משתני צבע וטיפוגרפיה --- */
:root {
    --primary-purple: #9b59b6; 
    --accent-teal: #1abc9c; 
    --bg-light-purple: #f8f1fb; 
    --whatsapp-green: #25D366;
    --text-color: #444; 
    --bg-main: #ffffff; 
    --font-family: 'Assistant', sans-serif;
}

/* --- 2. אתחול מערכת (Reset) --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: var(--font-family); 
}

body { 
    direction: rtl; 
    text-align: right;
    color: var(--text-color); 
    background-color: var(--bg-main); 
    font-size: 1.15rem; 
    line-height: 1.8; 
    scroll-behavior: smooth; 
}

/* =========================================
   דף הבית (Home Page)
   ========================================= */

.hero {
    height: calc(100vh - 65px);
    background: url("/assets/images/branding/cover.webp") no-repeat center center;
    background-size: cover;
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    padding-top: 20vh; 
    align-items: center; 
    text-align: center; 
    color: white; 
}

.hero h1 { 
    font-size: 5.5rem !important; 
    font-weight: 700; 
    text-shadow: 0 4px 15px rgba(0,0,0,0.6), 0 0 5px rgba(0,0,0,0.5); 
    margin-bottom: 5px; 
    color: #ffffff !important;
}

.hero p { 
    font-size: 2.2rem !important; 
    font-weight: 400; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.6); 
    color: #ffffff !important;
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 60px 20px 0px 20px; 
}

section { 
    background: white; 
    padding: 50px; 
    margin-bottom: 40px; 
    border-radius: 20px; 
}

h2 { 
    color: var(--primary-purple); 
    margin-bottom: 15px; 
    font-weight: 700; 
    font-size: 2.4rem; 
}

.about-split { 
    display: flex; 
    padding: 0 !important; 
    overflow: hidden; 
    align-items: stretch; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.about-text { 
    flex: 0 0 55%; 
    width: 55%; 
    padding: 60px 70px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    text-align: center; 
}

.about-text p { margin-bottom: 20px; }

.about-image { 
    flex: 0 0 45%; 
    width: 45%; 
}

.about-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

#expertise h2 { 
    text-align: center; 
    margin-left: auto;
    margin-right: auto;
    max-width: fit-content; 
}

.intro-text { 
    text-align: center; 
    max-width: 800px; 
    margin: 0 auto 40px auto; 
    font-size: 1.25rem;
}

.expertise-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px; 
    margin-top: 30px; 
}

.expertise-card { 
    background: #ffffff; 
    padding: 30px 20px; 
    border-radius: 20px; 
    border: 1px solid rgba(155, 89, 182, 0.1); 
    text-align: center; 
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.expertise-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 10px 25px rgba(155, 89, 182, 0.1); 
    border-color: var(--primary-purple);
}

.card-icon {
    font-size: 2.8rem;
    margin-bottom: 15px;
    display: block;
}

.expertise-card h3 {
    color: var(--primary-purple);
    font-size: 1.35rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.expertise-card p {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .expertise-grid { grid-template-columns: repeat(2, 1fr); }
    .about-split { flex-direction: column-reverse; } 
    .about-text, .about-image { flex: 0 0 100%; width: 100%; }
    .about-text { padding: 40px 25px; }
    .hero h1 { font-size: 3.5rem !important; }
}

@media (max-width: 600px) {
    #expertise { padding: 40px 25px !important; }
    .expertise-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .expertise-card { padding: 15px 10px !important; }
    .card-icon { font-size: 2rem; margin-bottom: 8px; }
    .expertise-card h3 { font-size: 1.1rem; margin-bottom: 5px; }
    .expertise-card p { font-size: 0.85rem; line-height: 1.3; }
    
    .hide-mobile { display: none; }
    .hero h1 { font-size: 2.8rem !important; }
    .hero p { font-size: 1.6rem !important; }
    
    .hero {
        background-image: url("/assets/images/branding/cover-mobile.webp") !important;
        height: 90vh;
    } 
    
    .about-image {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 30px 0 !important;
    }

    .profile-pic {
        width: 280px !important;
        height: 280px !important;
        min-width: 280px !important;
        min-height: 280px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    }
}

.btn { 
    display: inline-block; 
    padding: 13px 40px; 
    text-decoration: none; 
    border-radius: 30px; 
    font-weight: 600; 
    font-size: 1.3rem; 
    transition: 0.3s; 
}

.btn-whatsapp { 
    background: var(--whatsapp-green); 
    color: white; 
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.2); 
}

.btn-whatsapp:hover { 
    background: #1ebe57; 
    transform: translateY(-3px); 
}

/* =========================================
   עיצוב הדר הניווט העליון
   ========================================= */
.main-nav {
    position: sticky; 
    top: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff; 
    box-shadow: 0 2px 15px rgba(0,0,0,0.08); 
    height: 65px; 
    display: flex;
    align-items: center; 
}

.nav-container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    gap: 35px; 
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.nav-name, .nav-link {
    text-decoration: none;
    position: relative; 
    display: flex;
    align-items: center;
    height: 65px;
    transition: all 0.3s ease;
}

.nav-name::before, .nav-link::before {
    content: "";
    position: absolute;
    top: 12px; 
    left: 0;
    right: 0;
    height: 2px;
    background-color: transparent;
    transition: all 0.3s ease;
}

.nav-name {
    font-weight: 700;
    font-size: 2rem !important;
    color: var(--primary-purple) !important;
}

.nav-link {
    font-weight: 600;
    font-size: 1.3rem !important;
    color: var(--primary-purple) !important; 
    position: relative; 
    display: flex;
    align-items: center;
    height: 65px;
    transition: all 0.3s ease;
}

.nav-name:hover::before,
.nav-name.is-active::before,
.nav-link:hover::before, 
.nav-link.is-active::before {
    background-color: var(--primary-purple);
}

.nav-whatsapp-link {
    display: flex;
    align-items: center;
    height: 65px;
}

@media (max-width: 600px) {
    .nav-container { gap: 15px; } 
    .nav-name { font-size: 1.6rem !important; }
    .nav-link { font-size: 1.1rem !important; }
    .nav-name::before, .nav-link::before { top: 10px; } 
}

/* =========================================
   עמוד ריכוז פרסומים
   ========================================= */
.articles-split-wrapper { max-width: 1000px; margin: 40px auto; display: flex; flex-direction: column; gap: 60px; }
.article-split-card { display: flex; gap: 40px; align-items: flex-start; border-bottom: 1px solid #eee; padding-bottom: 40px; }
.card-content-side { flex: 1.5; text-align: right; }
.post-meta-line, .post-meta-top { font-size: 0.95rem; color: #777; margin-bottom: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.card-title a { text-decoration: none; color: var(--text-color); font-size: 2.2rem; font-weight: 700; line-height: 1.2; display: block; margin-bottom: 15px; }
.card-excerpt { font-size: 1.15rem; line-height: 1.7; color: #555; margin-bottom: 20px; }
.read-more-btn { color: var(--primary-purple); text-decoration: none; font-weight: 700; }
.card-image-side { flex: 1; }
.card-image, .card-image-side img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }

@media (max-width: 768px) {
    .articles-split-wrapper { gap: 0; margin-top: 10px; margin-right: -20px; margin-left: -20px; }
    .article-split-card { display: flex; flex-direction: row-reverse; gap: 13px; align-items: flex-start; padding: 12px 3px; margin: 0; border-bottom: 1px solid #eaeaea; background: transparent; border-radius: 0; box-shadow: none; width: auto; }
    .card-image-side { flex: 0 0 100px; }
    .card-image, .card-image-side img { width: 100%; height: 100px; border-radius: 8px; }
    .card-content-side { flex: 1; padding: 0; min-width: 0; }
    .card-title a { font-size: 1.15rem !important; line-height: 1.3; margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .post-meta-line { font-size: 0.9rem; margin-bottom: 0; margin-top: auto; }
    .post-meta-line a, .post-meta-line .author-name, .post-meta-line time, .post-meta-line .separator { display: none !important; }
    .card-excerpt, .read-more-btn { display: none; }
}

/* =========================================
   עמוד מאמר פנימי
   ========================================= */
.post-page-header { background-color: #ffffff; padding: 40px 0 30px 0; margin-bottom: 0; }
.post-wrapper > .container { padding-top: 25px; }
.split-header-container { display: flex; justify-content: space-between; align-items: flex-start; max-width: 1550px !important; width: 100%; margin: 0 auto; gap: 40px; }
.header-text-side { flex: 0 0 45%; max-width: 45%; text-align: right; padding-top: 30px; }
.header-text-side:only-child { max-width: 800px; margin: 0 auto; flex: none; width: 100%; }
.post-page-header .post-main-title { font-size: 4.8rem; color: #000000; font-weight: 400 !important; line-height: 1.05; margin-bottom: 25px; margin-top: 5px; letter-spacing: -1px; }
.post-subtitle { font-size: 1.4rem; color: #444; margin-top: 0; line-height: 1.5; font-weight: 400; }
.post-action-bar { display: flex; gap: 15px; align-items: center; margin-top: 30px; }
.action-btn { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background-color: #f5f5f5; color: #444; font-size: 1.3rem; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s ease; }
.wa-btn:hover { background-color: #25D366; color: white; transform: translateY(-3px); }
.print-btn:hover { background-color: #777; color: white; transform: translateY(-3px); }

@media print { .main-nav, .post-action-bar, .whatsapp-fixed, footer { display: none !important; } }

.header-image-side { flex: 0 0 46%; max-width: 46%; }
.featured-post-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 5px 25px rgba(0,0,0,0.06); }
.post-content-area { max-width: 800px; margin: 0 auto 80px auto; font-size: 1.25rem; line-height: 2; color: #333; }
.post-content-area h2, .post-content-body h2, .post-content-area h3, .post-content-body h3 { color: var(--primary-purple) !important; font-weight: 700 !important; margin: 40px 0 0px 0; font-size: 1.6rem; }
.post-content-area p { margin-bottom: 30px; }

@media (max-width: 768px) {
    .split-header-container { flex-direction: column; gap: 30px; padding: 0 20px; }
    .header-text-side, .header-image-side { max-width: 100%; flex: 1; padding-top: 0; }
    .post-page-header .post-main-title { font-size: 3rem; line-height: 1.1; }
    .featured-post-img { aspect-ratio: 4 / 5; }
}

.post-content-area table { width: 90%; max-width: 100%; margin: 30px auto; border-collapse: collapse; border: 2px solid #ddd; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.post-content-area th, .post-content-area td { border: 1px solid #ddd; text-align: center !important; padding: 16px 25px; vertical-align: middle; }
.post-content-area th { background-color: var(--primary-purple); color: white; border-bottom: 3px solid #734287; }
.post-content-area tr:nth-child(even) { background-color: #fcf8ff; }

@media (max-width: 768px) {
    .post-content-area table, .post-content-area tbody, .post-content-area tr, .post-content-area td { display: block; width: 100%; }
    .post-content-area thead { display: none; }
    .post-content-area tr { margin-bottom: 20px; border-radius: 8px; border: 1px solid #ddd; }
    .post-content-area td { border: none; border-bottom: 1px solid #eee; padding: 15px; text-align: right !important; }
    .post-content-area td::before { content: attr(data-label); display: block; font-weight: 700; color: var(--primary-purple); font-size: 0.95rem; margin-bottom: 5px; }
}

.post-content-area figure { margin: 40px auto; text-align: center; width: 100%; }
.post-content-area img { max-width: 700px; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin: 0 auto; }
.post-content-area figcaption { font-size: 0.95rem; color: #666; margin-top: 15px; font-style: italic; }
@media (max-width: 600px) { .post-content-area img { max-width: 90%; } }

.post-content-area ul, .post-content-area ol { list-style: none; padding: 0; margin: 0 0 30px 0; }
.post-content-area li { position: relative; padding-right: 25px; margin-bottom: 12px; }
.post-content-area ul li::before { content: "•"; position: absolute; right: 0; top: 0; font-weight: 700; color: var(--primary-purple); }
.post-content-area ol { counter-reset: custom-list-counter; }
.post-content-area ol li::before { content: counter(custom-list-counter) "."; counter-increment: custom-list-counter; position: absolute; right: 0; top: 0; font-weight: 700; color: var(--primary-purple); }

/* =========================================
   Footer
   ========================================= */
.main-footer { background-color: var(--bg-light-purple); margin-top: 20px; border-top: 1px solid rgba(155, 89, 182, 0.1); }
.main-footer .container { padding-top: 20px !important; padding-bottom: 25px !important; }
.footer-contact { text-align: center; margin-bottom: 0; }
.footer-contact h2 { margin-top: 0; margin-bottom: 5px; }
.contact-links-wrapper { display: flex; justify-content: center; gap: 30px; margin-top: 10px; flex-wrap: wrap; }
.contact-item { text-decoration: none; color: var(--text-color); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.whatsapp-footer .header-wa-icon { width: 22px; height: auto; }
.footer-bottom { display: flex; flex-direction: column; gap: 15px; padding-top: 15px; }
.footer-info-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.footer-credentials { font-size: 1.0rem; font-weight: 500; }
.license-link { color: inherit; text-decoration: none; transition: all 0.3s ease; }
.license-link:hover { color: var(--primary-purple); }
.footer-copyright { text-align: center; font-size: 0.9rem; opacity: 0.8; }
.footer-legal-links { display: flex; flex-direction: column; text-align: left; gap: 2px; }
.footer-legal-links a { text-decoration: none; color: var(--text-color); font-size: 0.85rem; transition: color 0.3s ease; }
.footer-legal-links a:hover { color: var(--primary-purple); }

@media (max-width: 768px) {
    .footer-info-row { flex-direction: column; text-align: center; gap: 15px; }
    .footer-legal-links { text-align: center; }
}

/* =========================================
   עמוד צור קשר
   ========================================= */
.contact-page-wrapper { max-width: 1000px; margin: 60px auto; padding: 0 20px; }
.contact-grid-elegant { display: flex; gap: 60px; align-items: flex-start; }
.contact-content-side { flex: 1; text-align: right; }
.contact-main-title { color: var(--primary-purple); font-size: 3rem; font-weight: 700; margin-bottom: 5px; }
.contact-subtitle { font-size: 1.3rem; color: #666; margin-bottom: 30px; }
.contact-profile-img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 25px rgba(155, 89, 182, 0.2); margin-bottom: 30px; display: block; }
.contact-personal-row { display: flex; justify-content: flex-start; align-items: center; gap: 40px; margin-bottom: 40px; }
.contact-methods-list { display: flex; flex-direction: column; gap: 15px; }
.elegant-contact-item { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; color: var(--text-color); text-decoration: none; font-weight: 500; transition: color 0.3s ease; }
.elegant-contact-item:hover { color: var(--primary-purple); }
.contact-wa-icon-small { width: 24px; height: auto; }
.parking-accordion { background-color: var(--bg-light-purple); border-radius: 12px; padding: 15px 20px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.parking-accordion summary { font-weight: 600; color: var(--primary-purple); font-size: 1.1rem; list-style: none; outline: none; }
.parking-accordion summary::-webkit-details-marker { display: none; }
.parking-content { margin-top: 15px; font-size: 1rem; line-height: 1.6; color: #555; border-top: 1px solid rgba(155, 89, 182, 0.2); padding-top: 15px; }
.contact-map-side { flex: 1.2; }
.map-elegant-wrapper { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.parking-accordion-wrapper { flex: 1; }
.map-icons-row { display: flex; gap: 15px; justify-content: flex-start; }
.nav-icon-link { display: flex; width: 50px; height: 50px; border-radius: 50%; background-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.08); align-items: center; justify-content: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.nav-icon-link:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.nav-app-icon { width: 28px; height: auto; }

@media (max-width: 768px) {
    .contact-grid-elegant { flex-direction: column; }
    .contact-personal-row { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
    .contact-profile-img { margin: 0 0 25px 0; }
    .parking-accordion-wrapper { width: 100%; margin-bottom: 15px; }
}

/* =========================================
   אפליקציית תרגול קשיבות (Pilot App)
   ========================================= */
:root {
    --card-bg: rgba(255, 255, 255, 0.95);
    --btn-bg: var(--primary-purple);
    --sys-msg-bg: #ffffff;
    --sys-msg-text: var(--text-color);
    --user-msg-bg: var(--primary-purple);
    --user-msg-text: #fff;
    --voice-fear: #e1f5fe;
    --voice-bully: #fce4ec;
    --voice-self: #e8f5e9;
    --voice-somatic: #fff3e0;
}

body.app-active header, body.app-active .site-header, body.app-active #header,
body.app-active footer, body.app-active .site-footer, body.app-active #footer,
body.app-active #contact, body.app-active .contact-section, body.app-active .contact-wrapper { display: none !important; }

@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

body.app-active {
    visibility: hidden !important; overflow: hidden !important; position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    background: linear-gradient(-45deg, #f0f2f5, #f8f1fb, #f3e5f5, #ffffff) !important;
    background-size: 400% 400% !important; animation: gradientBG 15s ease infinite !important;
    margin: 0 !important; padding: 0 !important; touch-action: none !important;
}

body.app-active #app-wrapper { visibility: visible !important; }

#app-wrapper { width: 100%; max-width: 500px; margin: 40px auto; background: var(--card-bg); border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); padding: 28px; box-sizing: border-box; transition: all 0.3s ease; position: relative; }
#app-wrapper.fullscreen-mode { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; height: 100dvh !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; z-index: 9999999 !important; display: flex !important; flex-direction: column !important; background: transparent !important; padding: 0 !important; }

#intro-screen { display: block; overflow-y: auto; height: 100%; padding: 40px 30px; text-align: center; max-width: 600px; margin: auto; }
#app-wrapper.fullscreen-mode #intro-screen { display: none !important; }
#intro-screen h1 { font-size: 4.8rem; color: #000000; font-weight: 400 !important; line-height: 1.05; margin-bottom: 25px; margin-top: 5px; letter-spacing: -1px; }
#intro-screen .app-subtitle { font-size: 1.4rem; color: #444; margin-top: 0; line-height: 1.5; font-weight: 400; margin-bottom: 30px; }
@media (max-width: 768px) { #intro-screen h1 { font-size: 3rem; line-height: 1.1; } }

.btn-primary { width: 100%; padding: 13px 40px; border: none; border-radius: 30px; font-size: 1.2rem; font-weight: 600; cursor: pointer; background-color: var(--btn-bg); color: #fff; transition: 0.3s; box-shadow: 0 4px 15px rgba(155, 89, 182, 0.2); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(155, 89, 182, 0.3); }

#chat-interface { flex: 1; display: none; flex-direction: column; width: 100%; max-width: 600px; margin: 0 auto; background: var(--card-bg); box-shadow: 0 8px 32px rgba(0,0,0,0.08); overflow: hidden !important; }
#app-wrapper.fullscreen-mode #chat-interface { display: flex !important; }
#progress-bar-container { height: 4px; background: #eee; width: 100%; flex-shrink: 0; }
#progress-bar { height: 100%; background: var(--primary-purple); width: 0%; transition: width 0.4s ease; }
#chat-history { flex: 1 1 auto !important; overflow-y: auto !important; padding: 20px !important; display: flex !important; flex-direction: column !important; gap: 16px; touch-action: pan-y !important; -webkit-overflow-scrolling: touch; }
.chat-spacer { flex-shrink: 0; height: 35vh; width: 100%; }

.message { max-width: 85%; padding: 14px 18px; border-radius: 20px; font-size: 1.1rem; line-height: 1.5; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative; animation: popIn 0.3s ease-out; word-wrap: break-word; white-space: pre-wrap; }
@keyframes popIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.msg-system { align-self: flex-start; background: var(--sys-msg-bg); color: var(--sys-msg-text); border-bottom-right-radius: 4px; border: 1px solid rgba(155, 89, 182, 0.1); }
.msg-user { align-self: flex-end; background: var(--user-msg-bg); color: var(--user-msg-text); border-bottom-left-radius: 4px; }

#input-area { background: #fff !important; border-top: 1px solid rgba(155, 89, 182, 0.1) !important; padding: 15px; display: flex !important; gap: 10px; align-items: flex-end; flex-shrink: 0 !important; padding-bottom: max(15px, env(safe-area-inset-bottom)) !important; }
#chat-input { flex: 1 !important; min-height: 48px; max-height: 120px !important; padding: 12px 16px; border: 1px solid #ddd; border-radius: 24px; font-size: 1.1rem; outline: none; resize: none; line-height: 1.4; }
#chat-input:focus { border-color: var(--primary-purple); }
#send-btn { background: var(--primary-purple); border:none; border-radius:50%; width:48px; height:48px; color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink: 0; transition: 0.2s; }
#send-btn:active { transform: scale(0.9); }
#send-btn svg { width: 22px; height: 22px; fill: currentColor; }

#options-area { background: #fff !important; border-top: 1px solid rgba(155, 89, 182, 0.1); display: none; gap: 8px; padding: 15px; flex-wrap: wrap; flex-shrink: 0 !important; max-height: 40vh; overflow-y: auto !important; }
.option-btn { background: #fff; border: 2px solid var(--primary-purple); color: var(--primary-purple); border-radius: 30px; padding: 10px 18px; font-weight: 600; cursor: pointer; text-align: right; transition: 0.2s; }
.option-btn:hover, .option-btn.selected { background: var(--primary-purple); color: #fff; }
#options-area.scale-mode { flex-wrap: nowrap; padding: 15px 5px; overflow-x: auto; }
#options-area.scale-mode .option-btn { padding: 12px 0; flex: 1; margin: 0 2px; font-size: 1.1rem; min-width: 30px; text-align: center; }

.disclaimer { text-align: right; font-size: 0.95rem; color: #666; background: var(--bg-light-purple); padding: 18px; border-radius: 12px; margin: 25px 0; border-right: 4px solid var(--primary-purple); line-height: 1.6; }

#summary-screen { display: none; flex: 1; overflow-y: auto; padding: 20px; background: var(--card-bg); flex-direction: column; align-items: center; }
.summary-container { width: 100%; max-width: 550px; margin: 0 auto; padding-bottom: 40px; }
.summary-title { text-align: center; color: #000; margin-bottom: 25px; font-size: 2.5rem; font-weight: 400; letter-spacing: -0.5px; }
.voice-card { background: #fff; border-radius: 15px; padding: 18px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); border-right: 5px solid; animation: popIn 0.5s ease-out forwards; opacity: 0; }
.voice-card:nth-child(2) { animation-delay: 0.1s; border-color: #81d4fa; background: var(--voice-fear); }
.voice-card:nth-child(3) { animation-delay: 0.3s; border-color: #f48fb1; background: var(--voice-bully); }
.voice-card:nth-child(4) { animation-delay: 0.5s; border-color: #ffcc80; background: var(--voice-somatic); }
.voice-card:nth-child(5) { animation-delay: 0.7s; border-color: #81c784; background: var(--voice-self); }
.voice-title { font-weight: 700; font-size: 1.05rem; color: #555; margin-bottom: 6px; }
.voice-text { font-size: 1.15rem; color: var(--text-color); line-height: 1.5; }
.summary-actions { margin-top: 35px; display: flex; flex-direction: column; gap: 14px; text-align: center; }

/* =========================================
   אפליקציית דו"ח התקף פניקה (Panic Report)
   ========================================= */

.modern-form-container {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.05);
    max-width: 600px;
    margin: 0 auto;
}

.form-main-title {
    color: var(--primary-purple);
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
}

.privacy-notice {
    background: #fdfaff;
    border: 1px solid rgba(155, 89, 182, 0.15);
    border-radius: 12px;
    padding: 15px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}

.seamless-group {
    background: #fdfaff;
    border: 1px solid rgba(155, 89, 182, 0.15);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.seamless-label {
    display: block;
    font-weight: 700;
    color: var(--primary-purple);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.inline-flex-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.form-group-inner {
    flex: 1;
    min-width: 120px;
}

.form-group-inner label {
    display: block;
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 5px;
    font-weight: 600;
}

.seamless-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #eee;
    border-radius: 12px;
    background: #fafafa;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s;
}
.seamless-input:focus {
    border-color: var(--primary-purple);
    outline: none;
}

textarea.seamless-input {
    resize: vertical;
    min-height: 80px;
}

.radio-options-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.radio-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.radio-chip:hover {
    border-color: var(--primary-purple);
}

.radio-chip input[type="radio"] {
    accent-color: var(--primary-purple);
}

.fear-control-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.slider-container-inner {
    flex: 1;
}

.fear-slider {
    width: 100%;
    accent-color: var(--primary-purple);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #777;
    margin-top: 5px;
    font-weight: 600;
}
.slider-labels span { flex: 1; }

.fear-number-input {
    width: 70px;
    padding: 10px;
    border: 2px solid #eee;
    border-radius: 12px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--primary-purple);
}

.symptoms-modern-list {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.symptom-row-header {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    background: #f5f5f5;
    padding: 12px 15px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #444;
}

.symptom-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    align-items: center;
    transition: background 0.2s;
}

.symptom-row:last-child { border-bottom: none; }
.symptom-row:hover { background: #fdfaff; }
.symptom-name { font-size: 1rem; color: #333; }
.symptom-action { text-align: center; }

.symp-cb, .symptom-action input[type="radio"] {
    transform: scale(1.3);
    accent-color: var(--primary-purple);
    cursor: pointer;
}

.export-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

@media (max-width: 600px) {
    .modern-form-container { padding: 20px 15px; }
    .symptom-row-header, .symptom-row { grid-template-columns: 1fr 60px 60px; padding: 10px; gap: 5px; }
    .symptom-row-header { font-size: 0.85rem; text-align: center; }
    .symptom-row-header div:first-child { text-align: right; }
    .symptom-name { font-size: 0.9rem; line-height: 1.2; }
    .fear-control-wrapper { flex-direction: column; align-items: stretch; gap: 15px; }
    .fear-number-input { width: 100%; }
    .export-actions { flex-direction: column; }
}

/* =========================================
   עיצוב Onboarding סופי - V9 (גלילה חופשית, סרגל חכם וכרטיסיות)
   ========================================= */

.onboarding-wrapper { max-width: 650px; margin: 40px auto; padding: 0 15px; min-height: 85dvh; display: flex; flex-direction: column; }

.splash-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-light-purple); z-index: 9999; transition: opacity 0.8s ease; }
.splash-intro-avatar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; opacity: 0; transition: opacity 1s ease; z-index: 3; }
.splash-intro-avatar.active { opacity: 1; }
.breathing-orb-v2 { position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%) scale(0.8); width: 150px; height: 150px; border-radius: 50%; background-color: rgba(155, 89, 182, 0.2); box-shadow: 0 0 60px rgba(155, 89, 182, 0.4); opacity: 0; transition: all 4s ease-in-out, opacity 1s ease; z-index: 1; }
.breathing-orb-v2.inhale { opacity: 1; transform: translateX(-50%) scale(3.5) translateY(-25px); }
.breathing-orb-v2.exhale { opacity: 0.6; transform: translateX(-50%) scale(1.1) translateY(10px); }
.breathing-orb-v2.calm { transform: translateX(-50%) scale(4); opacity: 0; transition: all 1.5s ease-out; }

.splash-text-group.top-placement { position: absolute; top: 8%; left: 0; right: 0; display: flex; justify-content: center; }
.breathe-msg { font-size: 2rem; color: var(--primary-purple); font-weight: bold; position: absolute; opacity: 0; transition: opacity 1s ease; }
.breathe-msg.active { opacity: 1; }

.stepper-container { display: flex; justify-content: space-between; margin-bottom: 20px; padding: 0 5px; }
.step-wrapper { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; width: 45px; }
.step-dot { width: 28px; height: 28px; border-radius: 50%; background-color: #e0d4e8; color: #888; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 0.95rem; transition: all 0.3s; }
.step-dot.active { background-color: var(--primary-purple); color: white; transform: scale(1.1); box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3); }
.step-label { font-size: 0.75rem; font-weight: 600; text-align: center; color: var(--primary-purple); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.step-label.active-text { opacity: 1; visibility: visible; }
.step-line { flex: 1; height: 2px; background-color: #e0d4e8; margin: 13px -10px 0 -10px; }

.onboarding-card { background: #ffffff; border-radius: 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); padding: 40px; position: relative; overflow: hidden; }
.onboarding-card-v2 { padding-top: 0; }
.onb-card-header-v2 { height: 90px; background-color: var(--bg-light-purple); margin: 0 -40px 15px -40px; border-radius: 24px 24px 0 0; }
.onb-profile-pic-container-v2 { position: relative; width: 110px; height: 110px; margin: -70px auto 15px auto; }
.onb-profile-pic-v2 { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 5px solid #ffffff; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.onb-title-v2 { color: var(--primary-purple); font-size: 2.1rem; font-weight: 700; text-align: center; }
.onb-title-v2 span { font-size: 1.05rem; font-weight: 400; color: #555; display: block; margin-top: 5px; }

.onboarding-screen { display: none !important; flex-direction: column; animation: fadeInSlide 0.4s; }
.onboarding-screen.active { display: flex !important; }

.onb-text { font-size: 1.1rem; line-height: 1.6; color: #444; margin-bottom: 15px; }

.info-card-list { display: flex; flex-direction: column; gap: 12px; }
.info-card { background: #fdfaff; border: 1px solid rgba(155, 89, 182, 0.15); border-radius: 16px; padding: 18px 20px; margin-bottom: 15px; transition: transform 0.2s; }
.info-card-title { color: var(--primary-purple); font-size: 1.15rem; margin-bottom: 6px; font-weight: 700; }
.info-card-text { font-size: 1.05rem; line-height: 1.5; color: #444; margin: 0; }

.highlight-card { background: rgba(155, 89, 182, 0.05); border-right: 4px solid var(--primary-purple); border-left: 1px solid rgba(155, 89, 182, 0.15); border-top: 1px solid rgba(155, 89, 182, 0.15); border-bottom: 1px solid rgba(155, 89, 182, 0.15); }
.highlight-card .info-card-text { font-style: italic; }

.treatment-image-container { margin: 15px 0; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); aspect-ratio: 16/9; }
.treatment-cover-img { width: 100%; height: 100%; object-fit: cover; }
.subtle-link { color: #777; text-decoration: underline; text-decoration-color: #d1c4e9; text-underline-offset: 3px; transition: all 0.2s ease; }
.subtle-link:hover { color: var(--primary-purple); text-decoration-color: var(--primary-purple); }
.arrival-more-link { display: inline-block; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(155, 89, 182, 0.2); color: var(--primary-purple); font-weight: 600; text-decoration: none; font-size: 0.95rem; width: 100%; transition: color 0.2s; }
.arrival-more-link:hover { color: #7d3c98; }

.friendly-input { width: 100%; padding: 12px; margin-bottom: 12px; border: 2px solid #eee; border-radius: 12px; background: #fafafa; font-size: 1rem; }
.onb-btn { border-radius: 30px; width: 100%; padding: 15px; font-size: 1.2rem; font-weight: bold; border: none; cursor: pointer; transition: 0.2s; margin-top: 15px; }
.btn-disabled { background-color: #ddd !important; color: #888 !important; cursor: not-allowed; }

.waiting-text { text-align: center; font-size: 1.3rem; font-weight: 600; color: var(--primary-purple); }

@keyframes fadeInSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
    body { overflow-y: auto !important; height: auto !important; }
    
    .onboarding-wrapper { min-height: 100dvh; height: auto; margin: 0; padding: 15px 10px 40px 10px; display: block; }
    .onboarding-card { display: flex; flex-direction: column; padding: 20px 15px 25px 15px; border-radius: 20px; height: auto; }
    
    .stepper-container { margin-bottom: 25px; padding: 0 10px; }
    .step-dot { width: 24px; height: 24px; font-size: 0.8rem; }
    .step-label { font-size: 0.65rem; margin-top: 2px; }
    .step-line { margin: 11px -6px 0 -6px; }
    
    .onb-card-header-v2 { height: 75px; margin: 0 -15px 15px -15px; border-radius: 20px 20px 0 0; }
    .onb-profile-pic-container-v2 { width: 85px; height: 85px; margin: -55px auto 15px auto; }
    .onb-title-v2 { font-size: 1.7rem; margin-bottom: 15px; }
    
    .info-card { padding: 14px 15px; margin-bottom: 12px; }
    .info-card-title { font-size: 1.05rem; margin-bottom: 4px; }
    .info-card-text { font-size: 0.95rem; }
    
    .treatment-image-container { margin: 10px 0; }
    .onb-btn { padding: 14px; font-size: 1.1rem; }
    
    .onboarding-screen { height: auto; display: none !important; }
    .onboarding-screen.active { display: flex !important; flex-direction: column; }
}
/* =========================================
   התאמת כותרות פנימיות בתוך האפליקציות
   ========================================= */
#form-interface .form-main-title {
    font-size: 4.8rem;
    color: #000000;
    font-weight: 400 !important;
    line-height: 1.05;
    letter-spacing: -1px;
}

@media (max-width: 768px) {
    #form-interface .form-main-title {
        font-size: 3rem;
        line-height: 1.1;
    }
}