/* =========================================================
   Ineris - Callback Widget (wysuwany z prawej strony)
   Kolory Ineris: żółto-pomarańczowe
   ========================================================= */

.ineris-cb {
    --cb-orange: #f97316;
    --cb-orange-dark: #ea580c;
    --cb-amber: #fbbf24;
    --cb-amber-2: #f59e0b;
    --cb-ink: #1f2937;
    --cb-muted: #6b7280;
    --cb-line: #f1e4d3;
    --cb-white: #ffffff;
    --cb-radius: 18px;
    --cb-shadow: 0 24px 60px -12px rgba(234, 88, 12, .45);
    --cb-font: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: fixed;
    z-index: 2147483000;
    top: 0;
    left: 0;
    font-family: var(--cb-font);
}

.ineris-cb *,
.ineris-cb *::before,
.ineris-cb *::after {
    box-sizing: border-box;
}

/* ---------- Zaczepka (pull tab) ---------- */
.ineris-cb__tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--cb-amber) 0%, var(--cb-orange) 55%, var(--cb-orange-dark) 100%);
    border-radius: 16px 0 0 16px;
    box-shadow: -8px 10px 26px -8px rgba(234, 88, 12, .55);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, padding .3s ease;
    animation: cbTabIn .6s cubic-bezier(.16,1,.3,1) .4s both;
}

.ineris-cb__tab:hover {
    transform: translateY(-50%) translateX(-4px);
    padding-right: 18px;
    box-shadow: -12px 14px 34px -8px rgba(234, 88, 12, .7);
}

.ineris-cb__tab i {
    writing-mode: horizontal-tb;
    font-size: 18px;
    animation: cbRing 2.4s ease-in-out infinite;
}

.ineris-cb__tab-ping {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 rgba(34, 197, 94, .6);
    animation: cbPing 1.8s ease-out infinite;
}

.ineris-cb.is-open .ineris-cb__tab {
    transform: translateY(-50%) translateX(120px);
    opacity: 0;
    pointer-events: none;
}

/* ---------- Overlay ---------- */
.ineris-cb__overlay {
    position: fixed;
    inset: 0;
    background: rgba(24, 16, 8, .38);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}

.ineris-cb.is-open .ineris-cb__overlay {
    opacity: 1;
    visibility: visible;
}

/* ---------- Panel wysuwany ---------- */
.ineris-cb__panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 400px;
    max-width: 92vw;
    background: var(--cb-white);
    box-shadow: var(--cb-shadow);
    transform: translateX(105%);
    transition: transform .48s cubic-bezier(.16,1,.3,1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.ineris-cb.is-open .ineris-cb__panel {
    transform: translateX(0);
}

/* ---------- Nagłówek panelu ---------- */
.ineris-cb__header {
    position: relative;
    padding: 30px 26px 26px;
    color: #fff;
    background: linear-gradient(135deg, var(--cb-amber) 0%, var(--cb-orange) 55%, var(--cb-orange-dark) 100%);
    overflow: hidden;
}

.ineris-cb__header::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
    border-radius: 50%;
}

.ineris-cb__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
    z-index: 2;
}

.ineris-cb__close:hover {
    background: rgba(255, 255, 255, .32);
    transform: rotate(90deg);
}

.ineris-cb__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.ineris-cb__badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 rgba(34, 197, 94, .6);
    animation: cbPing 1.8s ease-out infinite;
}

.ineris-cb__title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}

.ineris-cb__subtitle {
    margin: 0;
    font-size: 14.5px;
    opacity: .95;
    line-height: 1.45;
    position: relative;
    z-index: 2;
}

/* ---------- Ciało panelu ---------- */
.ineris-cb__body {
    padding: 24px 26px 30px;
    flex: 1;
}

/* Przełącznik trybu */
.ineris-cb__modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}

.ineris-cb__mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid var(--cb-line);
    border-radius: 14px;
    background: #fffdfa;
    cursor: pointer;
    text-align: center;
    transition: border-color .25s ease, background .25s ease, transform .2s ease;
}

.ineris-cb__mode i {
    font-size: 19px;
    color: var(--cb-orange);
}

.ineris-cb__mode span {
    font-size: 13px;
    font-weight: 700;
    color: var(--cb-ink);
    line-height: 1.25;
}

.ineris-cb__mode small {
    font-size: 11px;
    color: var(--cb-muted);
}

.ineris-cb__mode:hover {
    border-color: var(--cb-amber);
    transform: translateY(-2px);
}

.ineris-cb__mode.is-active {
    border-color: var(--cb-orange);
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    box-shadow: 0 6px 18px -8px rgba(234, 88, 12, .5);
}

/* Pola formularza */
.ineris-cb__field {
    margin-bottom: 16px;
}

.ineris-cb__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--cb-ink);
    margin-bottom: 7px;
}

.ineris-cb__label small {
    font-weight: 500;
    color: var(--cb-muted);
}

.ineris-cb__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ineris-cb__input-wrap > i {
    position: absolute;
    left: 14px;
    color: var(--cb-orange);
    font-size: 15px;
    pointer-events: none;
}

.ineris-cb__input {
    width: 100%;
    padding: 13px 14px 13px 40px;
    border: 2px solid var(--cb-line);
    border-radius: 12px;
    font-size: 15px;
    font-family: var(--cb-font);
    color: var(--cb-ink);
    background: #fffdfa;
    transition: border-color .2s ease, box-shadow .2s ease;
    outline: none;
}

.ineris-cb__input::placeholder { color: #b8a894; }

.ineris-cb__input:focus {
    border-color: var(--cb-orange);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, .14);
}

.ineris-cb__input.is-error {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

/* ---------- Selektor kraju + numer ---------- */
.ineris-cb__phone-row {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.ineris-cb__country {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 2px solid var(--cb-line);
    border-radius: 12px;
    background: #fffdfa;
    cursor: pointer;
    font-family: var(--cb-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--cb-ink);
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease;
    flex-shrink: 0;
}
.ineris-cb__country:hover { border-color: var(--cb-amber); }
.ineris-cb__country .cb-flag { font-size: 19px; line-height: 1; }
.ineris-cb__country .cb-dial { font-size: 14px; }
.ineris-cb__country i { font-size: 10px; color: var(--cb-orange); transition: transform .2s ease; }
.ineris-cb__country-drop.is-open ~ .ineris-cb__country i,
.ineris-cb__phone-row:has(.is-open) .ineris-cb__country i { transform: rotate(180deg); }

.ineris-cb__input--phone { padding-left: 14px; flex: 1; min-width: 0; }

.ineris-cb__country-drop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid var(--cb-line);
    border-radius: 14px;
    box-shadow: 0 20px 44px -14px rgba(234, 88, 12, .4);
    z-index: 20;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.ineris-cb__country-drop.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ineris-cb__country-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--cb-line);
}
.ineris-cb__country-search i { color: var(--cb-orange); font-size: 13px; }
.ineris-cb__country-search input {
    border: none;
    outline: none;
    width: 100%;
    font-family: var(--cb-font);
    font-size: 14px;
    color: var(--cb-ink);
    background: transparent;
}

.ineris-cb__country-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 240px;
    overflow-y: auto;
}
.ineris-cb__country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--cb-ink);
    transition: background .15s ease;
}
.ineris-cb__country-item:hover { background: #fff7ed; }
.ineris-cb__country-item.is-selected { background: linear-gradient(135deg, #fff7ed, #ffedd5); font-weight: 700; }
.ineris-cb__country-item .cb-flag { font-size: 18px; }
.ineris-cb__country-item .cb-name { flex: 1; }
.ineris-cb__country-item .cb-code { color: var(--cb-muted); font-weight: 600; font-size: 13px; }

.ineris-cb__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--cb-muted);
}

.ineris-cb__hint.is-error { color: #ef4444; }

.ineris-cb__scheduled { display: none; }
.ineris-cb__scheduled.is-visible { display: block; animation: cbFade .3s ease both; }

/* Przycisk submit */
.ineris-cb__submit {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    font-family: var(--cb-font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--cb-amber) 0%, var(--cb-orange) 55%, var(--cb-orange-dark) 100%);
    box-shadow: 0 12px 26px -8px rgba(234, 88, 12, .6);
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
    margin-top: 6px;
}

.ineris-cb__submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -8px rgba(234, 88, 12, .75);
}

.ineris-cb__submit:disabled { opacity: .7; cursor: not-allowed; }

.ineris-cb__submit .cb-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cbSpin .7s linear infinite;
    display: none;
}

.ineris-cb__submit.is-loading .cb-spinner { display: inline-block; }
.ineris-cb__submit.is-loading .cb-label,
.ineris-cb__submit.is-loading i { display: none; }

/* Stopka panelu */
.ineris-cb__foot {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--cb-line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ineris-cb__foot-item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    color: var(--cb-muted);
}

.ineris-cb__foot-item i {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: var(--cb-orange);
    font-size: 14px;
    flex-shrink: 0;
}

.ineris-cb__foot-item a { color: var(--cb-orange-dark); font-weight: 700; text-decoration: none; }
.ineris-cb__foot-item a:hover { text-decoration: underline; }

/* Komunikat wynikowy */
.ineris-cb__result {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 10px 12px;
    animation: cbFade .4s ease both;
}

.ineris-cb__result.is-visible { display: flex; }

.ineris-cb__result-icon {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    animation: cbPop .5s cubic-bezier(.16,1,.3,1) both;
}

.ineris-cb__result.is-error .ineris-cb__result-icon {
    background: linear-gradient(135deg, #f87171, #ef4444);
}

.ineris-cb__result-title { font-size: 21px; font-weight: 800; color: var(--cb-ink); margin: 0 0 8px; }
.ineris-cb__result-text { font-size: 14.5px; color: var(--cb-muted); line-height: 1.5; margin: 0 0 22px; max-width: 300px; }

.ineris-cb__result-btn {
    padding: 12px 26px;
    border: 2px solid var(--cb-line);
    border-radius: 12px;
    background: #fff;
    color: var(--cb-ink);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: var(--cb-font);
    transition: border-color .2s ease, background .2s ease;
}

.ineris-cb__result-btn:hover { border-color: var(--cb-orange); background: #fff7ed; }

.ineris-cb__consent {
    font-size: 11.5px;
    color: var(--cb-muted);
    line-height: 1.5;
    margin-top: 16px;
    text-align: center;
}
.ineris-cb__consent a { color: var(--cb-orange-dark); }

/* ---------- Animacje ---------- */
@keyframes cbTabIn {
    from { transform: translateY(-50%) translateX(120px); opacity: 0; }
    to   { transform: translateY(-50%) translateX(0); opacity: 1; }
}
@keyframes cbRing {
    0%, 65%, 100% { transform: rotate(0); }
    70% { transform: rotate(14deg); }
    75% { transform: rotate(-14deg); }
    80% { transform: rotate(10deg); }
    85% { transform: rotate(-10deg); }
    90% { transform: rotate(0); }
}
@keyframes cbPing {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); }
    70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes cbSpin { to { transform: rotate(360deg); } }
@keyframes cbFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cbPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
    .ineris-cb__panel { width: 100%; max-width: 100%; }
    .ineris-cb__tab { font-size: 13px; padding: 13px 11px; }
    .ineris-cb__title { font-size: 21px; }
}