/* =========================================================
   Astra Subscribe — изолированный блок подписки
   Все стили заскоуплены через .astra-subscribe,
   чтобы не конфликтовать с глобальными стилями CMS
   ========================================================= */

   .astra-subscribe {
    --graphite: #28334E;      /* основной графит */
    --graphite-2: #3B455B;    /* доп графит */
    --neon: #5BC3F5;          /* неон акцент */
    --neon-dark: #0077CD;     /* активный синий */
    --titan: #7E94AF;         /* доп серо-синий */
    --astra-orange: #5BC3F5;  /* акцент = неон */
    --astra-orange-dark: #0077CD;
    --astra-dark: #28334E;
    --astra-blue-dark: #1f2942;
    --astra-gray: #6b7385;
    --astra-light: #eef1f6;

    font-family: 'Manrope', sans-serif;
    background: #ffffff;
    color: var(--astra-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

/* Сбрасываем влияние глобальных стилей CMS на все элементы внутри блока */
.astra-subscribe,
.astra-subscribe *,
.astra-subscribe *::before,
.astra-subscribe *::after {
    box-sizing: border-box;
}
.astra-subscribe * {
    margin: 0;
    padding: 0;
}
.astra-subscribe ul,
.astra-subscribe ol {
    list-style: none !important;
}
.astra-subscribe img {
    max-width: 100%;
    display: block;
}
.astra-subscribe a {
    text-decoration: none;
    color: inherit;
}

.astra-subscribe .wrap { margin: 0 auto; padding: 0 24px; }

/* Buttons (базовые стили, принудительный override ниже) */
.astra-subscribe .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--neon); color: var(--graphite); border: none; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 16px;
    line-height: 1 !important;
    padding: 16px 34px; text-decoration: none;
    border-radius: 14px;
    transition: background .25s, transform .25s, color .25s;
}
.astra-subscribe .btn:hover { background: var(--neon-dark); color: #fff; transform: translateY(-2px); }
.astra-subscribe .btn-ghost {
    background: transparent; color: var(--astra-dark);
    box-shadow: inset 0 0 0 2px var(--astra-dark);
}
.astra-subscribe .btn-ghost:hover { background: var(--astra-dark); color: #fff; transform: translateY(-2px); }

/* Hero */
.astra-subscribe .hero {
    background: #ffffff;
    color: var(--graphite);
    padding: 72px 0 96px;
}
.astra-subscribe .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}
.astra-subscribe .hero-left { display: flex; flex-direction: column; align-items: flex-start;}
.astra-subscribe .hero-left h1 { font-size: clamp(38px, 5vw, 60px); font-weight: 800; line-height: 1.02; letter-spacing: -1.5px; margin-bottom: 24px; color: var(--graphite); }
.astra-subscribe .hero-left p { font-size: 20px; font-weight: 600; color: var(--astra-gray); margin-bottom: 36px; max-width: 480px; }
.astra-subscribe .btn-hero {
    background: var(--neon); color: #fff; border-radius: 16px;
    padding: 18px 32px; font-weight: 700; font-size: 18px;
}
.astra-subscribe .btn-hero:hover { background: var(--neon-dark); color: #fff; }
.astra-subscribe .btn-hero .arr-ico {
    width: 30px; height: 30px; background: var(--graphite); color: #fff;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; margin-left: 4px;
}

/* Сцена с иконкой почты на рабочем столе */
.astra-subscribe .envelope-wrap {
    display: flex; justify-content: center;
    padding: 30px 0;
}
.astra-subscribe .desktop-scene {
    position: relative;
    width: 100%; max-width: 480px;
    min-height: 400px;
}

/* Иконка почты на «рабочем компьютере» */
.astra-subscribe .mail-icon {
    position: absolute;
    top: 0; right: 10px;
    width: 150px; height: 150px;
    background: linear-gradient(160deg, #3B455B, #28334E);
    border-radius: 32px;
    box-shadow: 0 24px 50px rgba(40,51,78,0.35);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    animation: astraIconPress 3.2s ease-in-out 1 forwards;
}
.astra-subscribe .mail-icon i {
    font-size: 66px; color: var(--neon);
}
@keyframes astraIconPress {
    0%, 18%   { transform: scale(1); }
    22%       { transform: scale(0.92); }
    28%, 100% { transform: scale(1); }
}

/* Бейдж счётчика уведомлений */
.astra-subscribe .mail-badge {
    position: absolute; top: -10px; right: -10px;
    min-width: 38px; height: 38px; padding: 0 8px;
    background: #ff3b30; color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px;
    border: 4px solid #fff;
    box-shadow: 0 6px 14px rgba(255,59,48,0.4);
    animation: astraBadgePop 3.2s ease-in-out 1 forwards;
}
@keyframes astraBadgePop {
    0%, 24%   { transform: scale(1); opacity: 1; }
    34%       { transform: scale(0); opacity: 0; }
    100%      { transform: scale(0); opacity: 0; }
}

/* Курсор мыши, кликающий по иконке */
.astra-subscribe .cursor {
    position: absolute;
    left: 56%; top: 56%;
    font-size: 32px; color: var(--graphite);
    z-index: 20; pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
    animation: astraCursorClick 3.2s ease-in-out 1 forwards;
}
@keyframes astraCursorClick {
    0%        { transform: translate(40px, 40px) scale(1); opacity: 1; }
    18%       { transform: translate(0, 0) scale(1); opacity: 1; }
    22%       { transform: translate(0, 0) scale(0.8); opacity: 1; }
    28%       { transform: translate(0, 0) scale(1); opacity: 1; }
    55%       { transform: translate(40px, 40px) scale(1); opacity: 0; }
    100%      { transform: translate(40px, 40px) scale(1); opacity: 0; }
}

/* Кольцо-«пульс» при клике */
.astra-subscribe .click-ring {
    position: absolute; left: 50%; top: 50%;
    width: 150px; height: 150px;
    border: 3px solid var(--neon);
    border-radius: 32px;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    pointer-events: none;
    animation: astraClickRing 3.2s ease-out 1 forwards;
}
@keyframes astraClickRing {
    0%, 22%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    24%       { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
    38%       { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
    100%      { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

/* Письмо, появляющееся сверху */
.astra-subscribe .letter {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; max-width: 360px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 50px rgba(40,51,78,0.22);
    padding: 22px 26px;
    z-index: 5;
    transform: translateY(-40px) scale(0.92);
    opacity: 0;
    animation: astraLetterRise 3.2s cubic-bezier(.22,.61,.36,1) 1 forwards;
}
@keyframes astraLetterRise {
    0%, 28%   { transform: translateY(-40px) scale(0.92); opacity: 0; }
    42%, 100% { transform: translateY(0) scale(1); opacity: 1; }
}
.astra-subscribe .letter-head {
    display: flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 15px; color: var(--graphite);
    margin-bottom: 18px; letter-spacing: -0.3px;
}
.astra-subscribe .letter-head .seal {
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--neon); color: var(--graphite);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.astra-subscribe .letter-logo { height: 46px; width: auto; display: block; mix-blend-mode: multiply; }
.astra-subscribe .status-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0;
    border-top: 1px solid #eef1f6;
}
.astra-subscribe .status-item:first-of-type { border-top: none; padding-top: 0; }
.astra-subscribe .status-item .chk {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--astra-light);
    display: flex; align-items: center; justify-content: center;
    color: var(--neon); font-size: 13px; flex: 0 0 auto;
}
.astra-subscribe .status-item .lbl { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--graphite); }

/* Section base */
.astra-subscribe section.block { padding: 96px 0; }
.astra-subscribe section.block .btn { margin-top: 36px !important;  }
.astra-subscribe .section-tag { color: var(--astra-orange); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; display: block; }
.astra-subscribe h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.1; margin-bottom: 22px; }

/* What we send */
.astra-subscribe .grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; justify-content: stretch; }
.astra-subscribe .grid-2 > div { 
    height: 100%;
 }
.astra-subscribe .card {
    position: relative;
    background: var(--astra-light);
    padding: 44px 40px;
    border: none;
    --radius: 28px;
    --cut: 100px;
    --cut-radius: 18px;
}

.astra-subscribe .card.dark { background: var(--graphite); color: #fff; position: relative; overflow: hidden; height:100%;}
.astra-subscribe .card.dark h2 { color: #fff; }
.astra-subscribe .card.dark .big-num { color: var(--neon); font-size: 64px; font-weight: 800; line-height: 1; margin-bottom: 16px; position: relative; z-index: 1; }
.astra-subscribe .block .card.dark{
    justify-content: space-between;
}
.astra-subscribe ul.feature-list { list-style: none; }
.astra-subscribe ul.feature-list li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid #e2e2e6; font-size: 17px; }
.astra-subscribe ul.feature-list li:last-child { border-bottom: none; }
.astra-subscribe ul.feature-list i { color: var(--astra-orange); font-size: 18px; margin-top: 4px; }

/* Issues */
.astra-subscribe .issues-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.astra-subscribe .card-issue{
    position: relative;
    background: var(--astra-light);
    padding: 44px 40px;
    border: none;
    --radius: 28px;
    --cut: 100px;
    --cut-radius: 18px;
    background: var(--graphite); 
    transition: all .25s, transform .25s, color .25s;
}
.astra-subscribe .issue {
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    gap: 28px;
    /* background: var(--graphite);  */
    color: #fff;
    /* padding: 32px 28px;  */
    min-height: 200px;
    text-decoration: none;
    /* border-radius: 20px; */
    /* --cut: 60px; */
    /* clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); */
    transition: all .25s, transform .25s, color .25s;
}
.astra-subscribe .card-issue:hover { background: var(--neon); color: var(--graphite); transform: translateY(-4px); }
.astra-subscribe .issue .ico { color: var(--neon); font-size: 26px; transition: color .25s; }
.astra-subscribe .issue:hover .ico { color: var(--graphite); }
.astra-subscribe .issue .ttl { font-size: 19px; font-weight: 700; line-height: 1.25; }
.astra-subscribe .issue .arr { color: var(--titan); transition: color .25s; }
.astra-subscribe .issue:hover .arr { color: var(--graphite); }

/* Why read */
.astra-subscribe .why {
    background: var(--graphite); color: #fff;
    padding: 96px 0; position: relative; overflow: hidden;
}
.astra-subscribe .why h2 { color: #fff; }
.astra-subscribe .why p { font-size: 19px; color: #c8c8d2; max-width: 820px; margin-bottom: 40px; }

/* Form modal */
.astra-subscribe .astra-modal-back {
    position: fixed; inset: 0; background: rgba(10,10,16,0.7);
    display: none; align-items: center; justify-content: center; z-index: 9999; padding: 24px;
}
.astra-subscribe .astra-modal-back.open { display: flex; }
.astra-subscribe .astra-modal {
    background: #fff; max-width: 460px; width: 100%; padding: 44px 40px;
    border-radius: 28px; position: relative;
    --cut: 40px;
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.astra-subscribe .astra-modal h3 { font-size: 26px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.5px; }
.astra-subscribe .astra-modal p { color: var(--astra-gray); margin-bottom: 24px; }
.astra-subscribe .astra-modal input[type="text"] {
    width: 100%; padding: 15px 18px; font-family: inherit; font-size: 16px;
    border: 2px solid #e2e2e6; margin-bottom: 16px;
    border-radius: 12px;
    outline: none;
}
.astra-subscribe .astra-modal input[type="text"]:focus { border-color: var(--neon); }
.astra-subscribe .astra-modal input[type="checkbox"]{
    width: auto !important;
}
.astra-subscribe .astra-modal .btn { width: 100%; }
.astra-subscribe .astra-modal .astra-modal-close { position: absolute; top: 18px; right: 22px; background: none; border: none; font-size: 22px; color: var(--astra-gray); cursor: pointer; }
.astra-subscribe .astra-ok-msg { display: none; text-align: center; padding: 16px 0; color: var(--astra-dark); }
.astra-subscribe .astra-ok-msg i { color: var(--astra-orange); font-size: 44px; margin-bottom: 16px; }

.astra-subscribe .block-footer { background: #1f2942; color: var(--titan); padding: 40px 0; font-size: 14px; text-align: center; }

@media (max-width: 860px) {
    .astra-subscribe .grid-2 { grid-template-columns: 1fr; }
    .astra-subscribe .issues-grid { grid-template-columns: 1fr; }
    .astra-subscribe section.block, .astra-subscribe .why, .astra-subscribe .hero { padding-left: 0; padding-right: 0; }
    .astra-subscribe .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .astra-subscribe .hero-left { display: flex; flex-direction: column; align-items: flex-start;     padding: 0 20px;}
}

.astra-subscribe a.btn,
.astra-subscribe button.btn,
.astra-subscribe .btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: var(--neon) !important;
    color: var(--graphite) !important;
    border: none !important;
    cursor: pointer !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 16px 34px !important;
    text-decoration: none !important;
    border-radius: 14px !important;
    transition: background .25s, transform .25s, color .25s !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
/* Дочерние элементы кнопки (текст в span, иконка-стрелка) — выравниваем по центру
   flex-контейнера, а не по text-baseline, иначе из-за line-height: normal
   после all:unset текст и иконка едут вверх/вниз относительно центра кнопки */
.astra-subscribe a.btn *,
.astra-subscribe button.btn *,
.astra-subscribe .btn * {
    line-height: 1 !important;
    vertical-align: middle !important;
}
.astra-subscribe a.btn i,
.astra-subscribe button.btn i,
.astra-subscribe .btn i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.astra-subscribe a.btn:hover,
.astra-subscribe button.btn:hover,
.astra-subscribe .btn:hover {
    background: var(--neon-dark) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}
.astra-subscribe a.btn:visited,
.astra-subscribe a.btn:active,
.astra-subscribe a.btn:focus {
    color: var(--graphite) !important;
    text-decoration: none !important;
    outline: none !important;
}
.astra-subscribe .btn-hero {
    background: var(--neon) !important;
    color: #fff !important;
    border-radius: 16px !important;
    padding: 18px 32px !important;
    font-size: 18px !important;
}
.astra-subscribe .btn-hero:hover { background: var(--neon-dark) !important; color: #fff !important; }
.astra-subscribe .astra-modal .btn { width: 100% !important; }

/* Поля ввода внутри модалки подписки */
.astra-subscribe .astra-modal input[type="email"],
.astra-subscribe .astra-modal input[type="text"]{
/* .astra-subscribe .astra-modal input { */
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: block !important;
    padding: 15px 18px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    color: var(--astra-dark) !important;
    background: #fff !important;
    border: 2px solid #e2e2e6 !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
}
.astra-subscribe .astra-modal input:focus {
    border-color: var(--neon) !important;
}

/* Заголовки/параграфы — чтобы тема CMS не перебивала шрифт, отступы, list-style */
.astra-subscribe h1,
.astra-subscribe h2,
.astra-subscribe h3,
.astra-subscribe p,
.astra-subscribe span,
.astra-subscribe div {
    font-family: 'Manrope', sans-serif !important;
}

/* =========================================================
   Чекбокс согласия (форма подписки + вложенная модалка согласия)
   ========================================================= */
.astra-subscribe .astra-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    margin-bottom: 18px !important;
    text-align: left !important;
}
.astra-subscribe .astra-checkbox__input {
    all: revert !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 3px !important;
    accent-color: var(--neon) !important;
    cursor: pointer !important;
}
.astra-subscribe .astra-checkbox__label {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--astra-gray) !important;
}
.astra-subscribe .astra-checkbox__label a {
    color: var(--neon-dark) !important;
    text-decoration: underline !important;
}

/* Кнопка submit в состоянии disabled (до согласия) */
.astra-subscribe .astra-modal .btn[disabled] {
    opacity: .5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Вложенная модалка согласия — текстовый контент длиннее, добавляем скролл и левое выравнивание */
.astra-subscribe #agree__user_agreement_modal .astra-modal {
    max-width: 560px;
    max-height: 86vh;
    overflow-y: auto;
    text-align: left;
}
.astra-subscribe #agree__user_agreement_modal .astra-modal h3 {
    margin-bottom: 18px;
}
.astra-subscribe #agree__user_agreement_modal .astra-modal p {
    font-size: 14px;
    color: var(--astra-gray);
    margin-bottom: 14px;
}
.astra-subscribe #agree__user_agreement_modal .astra-modal .btn {
    width: 100%;
    margin-top: 10px;
}

/* Сообщения об ошибках валидации Parsley */
.astra-subscribe .error_message {
    display: block;
    color: #ff3b30 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
}
.astra-subscribe input.parsley-error {
    border-color: #ff3b30 !important;
}