/* Suprovid Реєстр сертифікатів — стилі під дизайн-систему сайта
   Палітра теми: primary #753cbe / dark #5a2d96 / light #8955ce / 50 #f3edfa / 100 #e4d6f3
   Заголовки #27333D, текст #4B4C77, шрифт Inter. */

:root{
	--sr-primary:#753cbe;
	--sr-primary-dark:#5a2d96;
	--sr-primary-light:#8955ce;
	--sr-primary-50:#f3edfa;
	--sr-primary-100:#e4d6f3;
	--sr-heading:#27333d;
	--sr-text:#4b4c77;
	--sr-muted:#6b7280;
	--sr-border:#eceef3;
	--sr-bg-soft:#f7f7fb;
	--sr-green:#16a34a;
	--sr-orange:#ea580c;
	--sr-red:#dc2626;
	--sr-gray:#64748b;
	--sr-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
	--sr-radius:16px;
	--sr-shadow:0 1px 3px rgba(39,51,61,.06),0 8px 24px rgba(39,51,61,.04);
	--sr-shadow-hover:0 12px 30px rgba(117,60,190,.14);
}

.sup-reestr{max-width:760px;margin:0 auto;font-family:var(--sr-font);color:var(--sr-text);}
.sup-reestr__title{font-size:clamp(28px,4.5vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--sr-heading);text-align:center;margin:0 0 8px;}
.sup-reestr__title::after{content:"";display:block;width:64px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--sr-primary),var(--sr-primary-light));margin:16px auto 0;}
.sup-reestr__lead{max-width:620px;margin:18px auto 0;text-align:center;font-size:16px;line-height:1.6;color:var(--sr-text);}

/* Форма пошуку — як hero-CTA сайта */
.sup-reestr__form{display:flex;gap:12px;margin:28px auto 28px;max-width:600px;flex-wrap:wrap;}
.sup-reestr__input{flex:1 1 260px;padding:15px 18px;border:1.5px solid #d8dce4;border-radius:14px;font-size:16px;font-family:inherit;color:var(--sr-heading);background:#fff;transition:border-color .15s,box-shadow .15s;}
.sup-reestr__input::placeholder{color:#9aa1b1;}
.sup-reestr__input:focus{outline:none;border-color:var(--sr-primary);box-shadow:0 0 0 4px var(--sr-primary-50);}
.sup-reestr__btn{padding:15px 30px;border:0;border-radius:14px;background:var(--sr-primary);color:#fff;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s,transform .12s,box-shadow .15s;box-shadow:0 8px 18px rgba(117,60,190,.22);}
.sup-reestr__btn:hover{background:var(--sr-primary-dark);transform:translateY(-1px);box-shadow:0 10px 22px rgba(117,60,190,.28);}
.sup-reestr__btn:active{transform:translateY(0);}
.sup-reestr__btn[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:none;}

/* Повідомлення */
.sup-reestr__msg{text-align:center;padding:20px;border-radius:14px;font-size:16px;font-weight:500;}
.sup-reestr__msg--error{background:#fdecec;color:#b42318;}
.sup-reestr__msg--empty{background:var(--sr-bg-soft);color:var(--sr-muted);border:1px solid var(--sr-border);}
.sup-reestr__count{font-weight:600;color:var(--sr-heading);margin:0 0 16px;}
.sup-reestr__note{margin-top:20px;color:var(--sr-muted);font-size:14px;text-align:center;line-height:1.5;}

/* Сітка карток */
.sup-reestr__cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}

/* Картка сертифіката */
.sup-card{position:relative;border:1px solid var(--sr-border);border-radius:var(--sr-radius);padding:22px;background:#fff;box-shadow:var(--sr-shadow);overflow:hidden;transition:transform .15s,box-shadow .15s;}
.sup-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sr-gray);}
.sup-card:hover{transform:translateY(-2px);box-shadow:var(--sr-shadow-hover);}
.sup-card--green::before{background:var(--sr-green);}
.sup-card--orange::before{background:var(--sr-orange);}
.sup-card--red::before{background:var(--sr-red);}
.sup-card--gray::before{background:var(--sr-gray);}

.sup-card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;}
.sup-card__edrpou{font-size:14px;color:var(--sr-muted);font-weight:500;}

/* Pill-бейдж статусу (як бейджі сайта — rounded-full) */
.sup-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:99px;color:#fff;font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap;}
.sup-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.85);}
.sup-badge--green{background:var(--sr-green);}
.sup-badge--orange{background:var(--sr-orange);}
.sup-badge--red{background:var(--sr-red);}
.sup-badge--gray{background:var(--sr-gray);}

.sup-card__body{margin:0;}
.sup-card__row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--sr-border);font-size:14px;}
.sup-card__row:last-child{border-bottom:0;}
.sup-card__row dt{color:var(--sr-muted);margin:0;flex:0 0 auto;}
.sup-card__row dd{margin:0;text-align:right;font-weight:600;color:var(--sr-heading);}
.sup-card__foot{margin-top:16px;}
.sup-card__link{display:inline-flex;align-items:center;gap:6px;color:var(--sr-primary);text-decoration:none;font-weight:700;font-size:14px;transition:gap .15s,color .15s;}
.sup-card__link:hover{color:var(--sr-primary-dark);gap:10px;}

/* ============================================================== *
 * Одинична сторінка сертифіката /reestr/c/{slug} (standalone HTML)
 * ============================================================== */
.sup-single-body{margin:0;background:linear-gradient(180deg,#faf9fd 0%,#f3edfa 100%);min-height:100vh;font-family:var(--sr-font);color:var(--sr-text);-webkit-font-smoothing:antialiased;}
.sup-single{max-width:640px;margin:0 auto;padding:40px 18px 56px;}
.sup-single__back{display:inline-flex;align-items:center;gap:6px;margin-bottom:22px;color:var(--sr-primary);text-decoration:none;font-weight:600;font-size:15px;transition:gap .15s,color .15s;}
.sup-single__back:hover{color:var(--sr-primary-dark);gap:10px;}
.sup-single__card{position:relative;background:#fff;border-radius:20px;padding:34px 32px;box-shadow:0 10px 40px rgba(39,51,61,.08);border:1px solid var(--sr-border);overflow:hidden;}
.sup-single__card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--sr-gray);}
.sup-single__card.sup-card--green::before{background:var(--sr-green);}
.sup-single__card.sup-card--orange::before{background:var(--sr-orange);}
.sup-single__card.sup-card--red::before{background:var(--sr-red);}
.sup-single__card.sup-card--gray::before{background:var(--sr-gray);}
.sup-single__status{margin-bottom:18px;}
.sup-single__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.sup-single__top .sup-single__status{margin-bottom:0;}
.sup-single__order{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;background:var(--sr-green);color:#fff;text-decoration:none;border-radius:12px;font-size:14px;font-weight:700;line-height:1.3;white-space:nowrap;transition:background .15s;}
.sup-single__order:hover{background:#15803d;}
.sup-single__title{font-size:clamp(22px,4vw,28px);font-weight:800;letter-spacing:-.01em;color:var(--sr-heading);margin:0 0 22px;line-height:1.2;}
.sup-single__list{margin:0;}
.sup-single__row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--sr-border);font-size:15px;}
.sup-single__row:last-child{border-bottom:0;}
.sup-single__row dt{color:var(--sr-muted);margin:0;}
.sup-single__row dd{margin:0;text-align:right;font-weight:600;color:var(--sr-heading);}
.sup-single__note{margin-top:22px;color:var(--sr-muted);font-size:14px;line-height:1.5;}

/* QR */
.sup-single__qr{margin-top:26px;padding-top:22px;border-top:1px solid var(--sr-border);text-align:center;}
.sup-single__qr-label{display:block;color:var(--sr-muted);font-size:14px;margin-bottom:12px;}
.sup-single__qr #sup-qr{display:inline-block;padding:12px;background:#fff;border:1px solid var(--sr-border);border-radius:14px;box-shadow:var(--sr-shadow);}
.sup-single__qr #sup-qr img,.sup-single__qr #sup-qr canvas{display:block;}
.sup-single__qr-dl{display:inline-block;margin-top:14px;padding:9px 18px;border:1.5px solid var(--sr-primary);background:#fff;color:var(--sr-primary);border-radius:12px;cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;transition:background .15s,color .15s;}
.sup-single__qr-dl:hover{background:var(--sr-primary);color:#fff;}

/* Посилання на скан сертифіката (PDF) */
.sup-single__pdf{margin-top:18px;text-align:center;}
.sup-single__pdf-link{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--sr-primary);color:#fff;text-decoration:none;border-radius:14px;font-size:14px;font-weight:700;box-shadow:0 8px 18px rgba(117,60,190,.22);transition:background .15s,transform .12s;}
.sup-single__pdf-link:hover{background:var(--sr-primary-dark);transform:translateY(-1px);}

/* ============================================================== *
 * Лендинг /reestr/ — обгортка + хлібні крихти.
 * Контент-секції (легенда, переваги, FAQ, форма) використовують
 * Tailwind-класи теми та глобальні .faq-item/.faq-answer/.faq-chevron
 * (як на /iso9001/), тож власних стилів тут не потребують.
 * ============================================================== */

/* Тема обгортає сторінку у .py-16 (4rem зверху) — підтягуємо контент
 * ближче до меню, лишаючи невеликий повітряний відступ (як на /iso9001/). */
.sup-reestr-page{margin-top:-1.5rem;}

/* Хлібні крихти (батьківський контейнер уже задає max-width і px) */
.sup-bc{padding:.25rem 0 0;margin:0 0 1.5rem;}

/* Зайва верхня прогалина між H1-секцією пошуку та крихтами прибрана */
.sup-reestr{margin-top:0;}

/* ============================== Адаптив ============================== */
@media(max-width:600px){
	.sup-reestr__title{font-size:26px;}
	.sup-reestr__cards{grid-template-columns:1fr;}
	.sup-single{padding:28px 14px 40px;}
	.sup-single__card{padding:26px 20px;}
	.sup-reestr-page{margin-top:-1.5rem;}
}
@media(max-width:520px){
	.sup-reestr__form{flex-direction:column;}
	.sup-reestr__btn{width:100%;}
}
@media(max-width:440px){
	.sup-single__order{margin-left:0;width:100%;justify-content:center;}
}
@media(max-width:380px){
	.sup-card__row,.sup-single__row{flex-direction:column;gap:2px;}
	.sup-card__row dd,.sup-single__row dd{text-align:left;}
	.sup-single__pdf-link{display:flex;justify-content:center;}
}