/* ТРАНКЕТА 2.0 (редизайн 2026-09-10): двоколонковий layout, картки годин, липкий підсумок,
   мобільна панель. Палітра сайту: синій #4267B2, зелений CTA #03B450, текст #1d1a33. */
.tr2-wrap { padding-top: 30px !important; padding-bottom: 60px !important; }
/* .container сайту: width 1760px + max-width 100%; своє обмеження лише на десктопі, інакше на мобільному
   max-width 1240 перекриває 100% і контент вилазить за екран */
@media (min-width: 992px) { .tr2 { max-width: 1240px; margin-left: auto; margin-right: auto; } }
/* крихти - на всю ширину контейнера, як на решті сторінок (без стрибка при переході з курсу);
   фон під крихтами = фон сторінки замовлення (#f9f9f9), а не біла смуга */
main { background: #f9f9f9; }
.tr2-crumbs { margin-bottom: 0 !important; flex-wrap: nowrap !important; }
.tr2-crumbs .bc-theme { display: inline-block; max-width: min(60vw, 720px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tr2 { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px 40px; align-items: start; text-align: left; }
.tr2-main { grid-column: 1; grid-row: 2; }
.tr2-side { grid-column: 2; grid-row: 2 / span 2; }
.tr2-faq { grid-column: 1; grid-row: 3; }
.tr2-nonum .tr2-h em { display: none; }
.tr2-head { grid-column: 1 / -1; }
.tr2-wrap > .container { padding-top: 0 !important; }
.tr2-title { font-size: 24px; line-height: 1.3; font-weight: 700; margin: 0; color: #1d1a33; }
.tr2-meta { margin-top: 8px; font-size: 13px; color: #6a6f80; line-height: 1.6; }
.tr2-meta .ok { color: #03963f; font-weight: 600; }
.tr2-rating { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }
.tr2-rating .rstars { position: relative; display: inline-block; color: #d9d9d9; letter-spacing: 2px; line-height: 1; }
.tr2-rating .rfill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #f5a623; letter-spacing: 2px; }
.tr2-rating .rcnt { color: #6a6f80; font-size: 13px; }
.tr2-main { min-width: 0; display: grid; gap: 22px; }
.tr2-block { text-align: left; }
.tr2-h { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; margin: 0 0 14px 0 !important; color: #1d1a33; }
.tr2-h em { font-style: normal; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #4267B2; color: #fff; font-size: 14px; display: inline-grid; place-items: center; }
.tr2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tr2-grid2 > .form-wrap { margin-top: 28px !important; }
.tr2-grid2 { margin-top: 0 !important; } /* відступ дає лише .form-wrap усередині, інакше він подвоюється після Email */
#regform > .form-wrap:first-child { margin-top: 24px; }
.tr2-hint { font-size: 12px; color: #6a6f80; margin-top: 10px; }

/* картки годин (input id=hN збережено для всього JS) */
.tr2-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tr2-plan { position: relative; display: block; margin: 0; border: 1.5px solid #dfe3ea; border-radius: 10px; padding: 12px 12px 12px 36px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; font-weight: normal; }
.tr2-plan:hover { border-color: #b7c6e8; }
.tr2-plan:focus-within { box-shadow: 0 0 0 3px rgba(66, 103, 178, .35); }
.tr2-plan.sel { border-color: #03B450; background: #f0fbf5; box-shadow: 0 0 0 3px rgba(3,180,80,.10); }
.tr2-plan input { position: absolute; left: 12px; top: 15px; margin: 0; width: 15px; height: 15px; accent-color: #03B450; }
.tr2-plan .tp-h { display: block; font-size: 16px; font-weight: 700; color: #1d1a33; line-height: 1.2; }
.tr2-plan .tp-e { display: block; font-size: 11px; color: #6a6f80; margin-top: 2px; line-height: 1.35; white-space: nowrap; }
.tr2-plan .tp-e + .tp-e { margin-top: 0; }
.tr2-plan .tp-p { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; color: #1d1a33; line-height: 1.3; }
.tr2-plan .tp-p .pdprice s { margin-right: 6px !important; }
.pdnew { color: #03963f; font-weight: 700; }
.tr2-plan .tp-p .pdprice s { font-weight: normal; }
.tr2-plan .tp-p small { display: block; font-weight: 500; color: #6a6f80; font-size: 11px; margin-left: 0; }
/* «Хіт» - як у кабінеті (recommend/block.php .rec-hit): жовта плашка в куті картки */
.tr2-plan .tp-tag { display: inline-block; vertical-align: 2px; margin-left: 4px; font-size: 10px; font-weight: bold; background: #fff3d1; color: #a8781a; border-radius: 9px; padding: 1px 8px; white-space: nowrap; line-height: 16px; }

#subinformer { background: #f4fbf8; border: 1px solid #bfe9d8; border-radius: 10px; padding: 9px 14px; margin: 0 0 12px 0; font-size: 14px; text-align: left; }
#subinformer .si-head { font-weight: bold; color: #03963f; }
#subinformer .si-line { display: none; }
#subupsell { display: none; text-align: left; margin: 14px 0 0 0; padding: 10px 14px; border: 1px solid #e3e6ea; border-left: 3px solid #03B450; background: #fafbfc; font-size: 14px; line-height: 1.5; color: #222; }
#subupsell .su-main { font-weight: bold; }
#subupsell .su-note { color: #6b6b6b; }
#subupsell .su-link { display: inline-block; margin-top: 4px; color: #03963f; font-weight: bold; text-decoration: none; white-space: nowrap; }
#subupsell .su-link:hover { text-decoration: underline; color: #03963f; }

/* дані вошедшого */
.tr2-user { border: 1px solid #dfe3ea; border-radius: 12px; padding: 14px 18px; background: #fff; }
.tr2-user .tu-t { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6a6f80; }
.tr2-user .tu-name { font-size: 17px; font-weight: 700; margin-top: 4px; color: #1d1a33; }
.tr2-user .tu-sub { font-size: 14px; color: #6a6f80; margin-top: 2px; }
.tr2-user .tu-edit { display: inline-block; margin-top: 8px; font-size: 14px; color: #4267B2; text-decoration: underline; }

/* оплата */
#paymethods { text-align: left; }
#paymethods .custom-control { margin-bottom: 8px; font-size: 15px; }
.tr2-paynote { font-size: 13px; color: #6a6f80; margin-top: 6px; }

/* липкий підсумок */
.tr2-side { min-width: 0; }
.tr2-summary { position: sticky; top: 16px; border: 1px solid #dfe3ea; border-radius: 14px; padding: 20px 20px 18px; background: #fff; box-shadow: 0 8px 24px rgba(20, 24, 50, .06); text-align: left; }
.tr2-summary .ts-t { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6a6f80; font-weight: 700; }
.tr2-summary .ts-course { font-weight: 600; margin-top: 8px; font-size: 15px; line-height: 1.35; color: #1d1a33; }
.tr2-summary .ts-rows { margin-top: 14px; border-top: 1px solid #e9ecf2; }
.tr2-summary .ts-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e9ecf2; font-size: 14px; color: #1d1a33; font-variant-numeric: tabular-nums; }
.tr2-summary .ts-row b { font-weight: 600; text-align: right; }
.tr2-summary .ts-total { font-size: 18px; border-bottom: none; padding-top: 14px; }
.tr2-summary .ts-total b { font-weight: 800; font-size: 20px; }
.tr2-summary .ts-total s { color: #8a8a8a; font-weight: 400; font-size: 15px; margin-right: 6px; }
.tr2-summary .ts-sub { font-size: 13px; color: #03963f; margin-top: -6px; padding-bottom: 6px; }
#errormsg { color: #c0392b; font-size: 13px; margin: 6px 0 0; }
#errormsg:empty { display: none; }
.tr2-summary .tr2-cta { display: block; width: 100%; margin: 14px 0 0 0 !important; padding: 16px 20px !important; font-size: 16px !important; border-radius: 10px !important; background: #03B450; text-align: center; }
.tr2-summary .tr2-cta.pending { background: #a9b0bf !important; }
.tr2-summary .ts-hint { margin-top: 8px; font-size: 12px; color: #c0392b; text-align: center; }
.tr2-summary .ts-secure { margin-top: 10px; font-size: 12px; color: #6a6f80; text-align: center; }
.tr2-summary .ts-secure::before { content: "🔒 "; }
.tr2-summary .ts-trust { margin-top: 14px; display: grid; gap: 6px; font-size: 13px; color: #1d1a33; }
.tr2-summary .ts-trust div::before { content: "✓"; color: #03B450; font-weight: 800; margin-right: 8px; }
.tr2-summary .ts-consent { margin-top: 12px; font-size: 11px; color: #6a6f80; line-height: 1.4; }
.tr2-summary .ts-consent a { color: #4267B2; }

/* FAQ (замість стрічки кроків) */
.tr2-faq { margin-top: 8px; border-top: 1px solid #e9ecf2; padding-top: 18px; }
.tr2-faq h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px 0 !important; color: #1d1a33; text-align: left; }
.tr2-faq details { border-bottom: 1px solid #e9ecf2; }
.tr2-faq summary { cursor: pointer; list-style: none; padding: 12px 28px 12px 0; font-size: 15px; font-weight: 600; color: #1d1a33; position: relative; }
.tr2-faq summary::-webkit-details-marker { display: none; }
.tr2-faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 20px; font-weight: 400; color: #6a6f80; transition: transform .2s; }
.tr2-faq details[open] summary::after { transform: rotate(45deg); }
.tr2-faq p { margin: 0 0 14px 0; font-size: 14px; line-height: 1.55; color: #3d4152; }
.tr2-faq a { color: #4267B2; }

.tr2-gone { grid-column: 1 / -1; }

@media (max-width: 1199px) {
    .tr2-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .tr2 { grid-template-columns: 1fr; gap: 22px; }
    .tr2-main, .tr2-side, .tr2-faq { grid-column: auto; grid-row: auto; }
    .tr2, .tr2-crumbwrap { padding-left: 16px !important; padding-right: 16px !important; } /* власник: відступ від краю екрана */
    .tr2-title { font-size: 20px; }
    .tr2-crumbs .bc-theme { max-width: 45vw; }
    .tr2-summary { position: static; }
}
@media (max-width: 575px) {
    .tr2-plans { grid-template-columns: 1fr; }
    .tr2-grid2 { grid-template-columns: 1fr; }
}