/* ================================================================
   MITS Login – Zone Picker (split screen)
   ================================================================ */

/* ── Zmienne domyślne (fallback gdy brak tokenów theme) ───────── */
:root {
    --child-bg:         #FFF3D0;
    --child-accent:     #F5A623;
    --child-btn:        #F5A623;
    --child-btn-hover:  #E09515;
    --parent-bg:        #D6EEFF;
    --parent-accent:    #4A90D9;
    --parent-btn:       #4A90D9;
    --parent-btn-hover: #3A7BC8;
}

/* ── Layout ───────────────────────────────────────────────────── */

.mits-zone-selector {
    display:    flex;
   /* margin-top: var(--header-height, 80px);*/
    position:   relative;
}

.mits-zone-panel {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         60px 40px;
    position:        relative;
    overflow:        hidden;
    cursor:          pointer;
    text-decoration: none;
    transition:      filter 0.5s ease, opacity 0.5s ease;
}

/* Blur effect: hovering one panel blurs the other */
.mits-zone-selector:hover .mits-zone-panel             { filter: blur(6px); opacity: 0.55; }
.mits-zone-selector:hover .mits-zone-panel:hover       { filter: blur(0);   opacity: 1; }

.mits-zone-child  { background: var(--child-bg); }
.mits-zone-parent { background: var(--parent-bg); }

/* ── Dekoracyjne kółka ────────────────────────────────────────── */

.mits-zone-decor {
    position:       absolute;
    border-radius:  50%;
    opacity:        0.25;
    pointer-events: none;
}

.mits-zone-child .mits-zone-decor--1  { width: 180px; height: 180px; background: var(--child-accent);  top: 8%;   left: -40px; }
.mits-zone-child .mits-zone-decor--2  { width: 120px; height: 120px; background: #FFDAB3;              bottom: 15%; right: 10%; }
.mits-zone-child .mits-zone-decor--3  { width: 80px;  height: 80px;  background: #FFE0D3;              top: 20%;  right: 20%; opacity: 0.3; }

.mits-zone-parent .mits-zone-decor--1 { width: 160px; height: 160px; background: var(--parent-accent); top: 10%;  right: -30px; }
.mits-zone-parent .mits-zone-decor--2 { width: 100px; height: 100px; background: #C5B3E6;              bottom: 20%; left: 15%; }
.mits-zone-parent .mits-zone-decor--3 { width: 70px;  height: 70px;  background: #A8DFC8;              bottom: 10%; right: 30%; opacity: 0.3; }

/* ── Treść ────────────────────────────────────────────────────── */

.mits-zone-content {
    position:   relative;
    z-index:    2;
    text-align: center;
    max-width:  400px;
}

.mits-zone-icon {
    width:           100px;
    height:          100px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     'Baloo 2', cursive;
    font-size:       1.8rem;
    font-weight:     800;
    margin:          0 auto 28px;
    box-shadow:      0 4px 20px rgba(0, 0, 0, .08);
}
.mits-zone-child  .mits-zone-icon { background: rgba(245, 166, 35, 0.2); color: #8B6914; }
.mits-zone-parent .mits-zone-icon { background: rgba(74,  144, 217, 0.2); color: #2A5F9E; }

.mits-zone-title {
    font-family:   'Baloo 2', cursive;
    font-size:     clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight:   800;
    margin-bottom: 12px;
    line-height:   1.2;
}
.mits-zone-child  .mits-zone-title { color: #8B6914; }
.mits-zone-parent .mits-zone-title { color: #2A5F9E; }

.mits-zone-description {
    font-size:     1rem;
    color:         var(--text-secondary, #5A5A5A);
    margin-bottom: 32px;
    line-height:   1.7;
}

.mits-zone-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     'DM Sans', sans-serif;
    font-weight:     600;
    font-size:       1.05rem;
    padding:         16px 40px;
    border-radius:   var(--radius-full, 50px);
    color:           #fff;
    transition:      all var(--transition-spring, 0.5s cubic-bezier(0.34, 1.56, 0.64, 1));
    box-shadow:      0 4px 16px rgba(0, 0, 0, .15);
}
.mits-zone-child  .mits-zone-btn { background: var(--child-btn); }
.mits-zone-child:hover  .mits-zone-btn { background: var(--child-btn-hover);  transform: translateY(-2px); box-shadow: 0 6px 24px rgba(245, 166, 35, 0.4); }
.mits-zone-parent .mits-zone-btn { background: var(--parent-btn); }
.mits-zone-parent:hover .mits-zone-btn { background: var(--parent-btn-hover); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(74, 144, 217, 0.4); }

.mits-zone-register {
    margin-top: 16px;
    font-size:  0.88rem;
    color:      var(--text-light, #8A8A8A);
}
.mits-zone-register span {
    color:                 var(--text-primary, #2D2D2D);
    font-weight:           600;
    text-decoration:       underline;
    text-underline-offset: 2px;
}
.mits-zone-child:hover  .mits-zone-register span,
.mits-zone-child:hover  .mits-zone-register a { color: var(--child-accent); }
.mits-zone-parent:hover .mits-zone-register span,
.mits-zone-parent:hover .mits-zone-register a { color: var(--parent-accent); }

.mits-zone-register a {
    color:                 var(--text-primary, #2D2D2D);
    font-weight:           600;
    text-decoration:       underline;
    text-underline-offset: 2px;
    transition:            color var(--transition-fast, 0.2s cubic-bezier(0.4, 0, 0.2, 1));
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 768px) {
    .mits-zone-selector {
        flex-direction: column;
        min-height:     auto;
    }
    .mits-zone-panel {
        min-height: auto;
        padding:    50px 24px;
    }
    .mits-zone-divider {
        top:       auto;
        left:      50%;
        transform: translate(-50%, -50%);
    }
    /* Wyłącz blur na mobile — dotyk nie ma hover */
    .mits-zone-selector:hover .mits-zone-panel {
        filter:  none;
        opacity: 1;
    }
}