/*
Theme Name: Blacklist.lt Reviews (LT)
Theme URI: https://blacklist.lt
Author: Blacklist.lt
Description: LT tema: patikrinti atsiliepimai apie specialistus. 
Version: 0.2.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: blacklistlt
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ===== CSS VARIABLES ===== */
:root { 
    --gap: 16px; 
    --radius: 14px;
    --tap: 48px;
    --primary-color: #0a66c2;
    --text-color: #111;
    --background: #fafafa;
    --border-color: #e5e7eb;
}

/* ===== RESET & BASE STYLES ===== */
* { 
    box-sizing: border-box; 
}

body { 
    margin: 0; 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Helvetica Neue, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; 
    color: var(--text-color); 
    background: var(--background);
    -webkit-text-size-adjust: 100%;
}

html, body { 
    -webkit-overflow-scrolling: touch; 
}

a { 
    color: var(--primary-color); 
    text-decoration: none; 
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

a:hover { 
    text-decoration: underline; 
}

/* ===== LAYOUT COMPONENTS ===== */
.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 24px; 
}

.hero { 
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%); 
    padding: 40px 24px 24px 24px; 
    border-bottom: none;
    position: relative;
}

.hero .wrap { 
    max-width: 900px; 
    margin: 0 auto; 
    text-align: center; 
}

.brand { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 16px; 
}

.brand img { 
    height: 72px; 
    width: auto; 
}

h1.hero-title { 
    font-size: clamp(22px, 3vw, 30px); 
    margin: 0 0 8px; 
    line-height: 1.3;
}

p.hero-sub { 
    font-size: clamp(13px, 2vw, 15px); 
    color: #555; 
    margin: 0 0 24px; 
    line-height: 1.4;
}

/* ===== SEARCH COMPONENTS ===== */
.sticky-search {
    position: sticky;
    top: -1px;
    z-index: 100;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.sticky-search .searchbar {
    margin: 0 auto;
    max-width: 800px;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.searchbar { 
    display: flex; 
    gap: 8px; 
    align-items: center; 
    justify-content: center; 
    flex-wrap: wrap; 
    background: #fff; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius); 
    padding: 12px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
}

.searchbar input[type="search"] { 
    flex: 1 1 420px; 
    min-width: 260px; 
    border: 0; 
    outline: 0; 
    font-size: 16px; 
    padding: 12px 14px; 
    background: transparent;
    font-family: inherit;
}

.searchbar input[type="search"]::placeholder {
    color: #666;
    opacity: 0.8;
}

/* ===== BUTTONS & INTERACTIVE ELEMENTS ===== */
.btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    padding: 12px 16px; 
    border-radius: 12px; 
    border: 1px solid var(--border-color); 
    background: #fff; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 14px;
    min-height: var(--tap);
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn.primary { 
    background: #111827; 
    color: #fff; 
    border-color: #111827; 
}

.btn:hover { 
    transform: translateY(-1px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
}

.btn:focus, 
input:focus, 
select:focus, 
textarea:focus { 
    outline: 2px solid var(--primary-color); 
    outline-offset: 2px; 
}

.actions { 
    display: flex; 
    gap: 10px; 
    justify-content: center; 
    margin-top: 16px; 
    flex-wrap: wrap;
}

.badge { 
    display: inline-block; 
    padding: 4px 10px; 
    border-radius: 999px; 
    background: #eef6ff; 
    color: var(--primary-color); 
    border: 1px solid #dbeafe; 
    font-size: 12px; 
    font-weight: 600; 
}

/* ===== CONTENT CARDS ===== */
.cards { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: var(--gap); 
    margin-top: 24px;
}

.card { 
    background: #fff; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius); 
    padding: 16px; 
}

.card h3 { 
    margin: 0 0 6px; 
    font-size: 18px; 
}

/* ===== FORM ELEMENTS ===== */
.form-row { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    margin-bottom: 14px; 
}

input, 
select, 
textarea { 
    border: 1px solid var(--border-color); 
    border-radius: 10px; 
    padding: 10px 12px; 
    font-size: 15px;
    min-height: var(--tap);
    -webkit-appearance: none;
    font-family: inherit;
}

label { 
    font-weight: 600; 
    font-size: 14px; 
    color: #333; 
}

/* ===== UTILITY CLASSES ===== */
.notice { 
    padding: 12px 14px; 
    border-radius: 12px; 
    background: #f6f8fa; 
    border: 1px solid var(--border-color); 
}

table.search-results { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 18px; 
}

table.search-results td, 
table.search-results th { 
    padding: 10px 8px; 
    border-bottom: 1px solid #eee; 
    text-align: left; 
}

.small { 
    font-size: 13px; 
    color: #666; 
}

.verified { 
    color: #059669; 
    font-weight: 700; 
    font-size: 12px; 
}

.footer { 
    color: #888; 
    font-size: 14px; 
    padding: 24px; 
    text-align: center; 
}

/* ===== LIVE SEARCH SUGGESTIONS ===== */
.bl-suggest {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    max-height: 240px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.bl-suggest .bl-suggest-item {
    display: block;
    text-align: left;
    background: #fff;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid #eef2f7;
    font-size: 14px;
}

.bl-suggest .bl-suggest-item:first-child { 
    border-top-left-radius: 12px; 
    border-top-right-radius: 12px; 
}

.bl-suggest .bl-suggest-item:last-child { 
    border-bottom-left-radius: 12px; 
    border-bottom-right-radius: 12px; 
    border-bottom: none;
}

.bl-suggest .bl-suggest-item .t { 
    font-weight: 600; 
    display: block;
    margin-bottom: 2px;
}

.bl-suggest .bl-suggest-item .s { 
    font-size: 12px; 
    color: #666; 
    display: block;
}

.bl-suggest .bl-suggest-item.active, 
.bl-suggest .bl-suggest-item:hover { 
    background: #f9fafb; 
}

/* ===== REVIEW FORM STYLES ===== */
.page-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-title {
    font-size: clamp(24px, 4vw, 32px);
    margin: 0 0 8px 0;
    color: var(--text-color);
}

.page-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.review-form {
    max-width: 700px;
    margin: 0 auto 40px;
}

.form-section {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.form-section:hover {
    border-color: #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.form-section h3 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: var(--text-color);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-row.radio-row {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.form-select,
.form-textarea,
.form-input {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    width: 100%;
    transition: all 0.3s ease;
}

.form-select:focus,
.form-textarea:focus,
.form-input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-color: var(--primary-color);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.form-help {
    font-size: 13px;
    color: #666;
    margin: 4px 0 0 0;
}

/* Specialist Type Toggle */
.radio-group {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.radio-group:hover {
    border-color: var(--primary-color);
    background: #f8fafc;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

.radio-group input[type="radio"]:checked + .radio-custom {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.radio-group input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

.radio-label {
    font-weight: 500;
    color: var(--text-color);
}

.radio-group:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Star Rating System */
.star-rating {
    text-align: left;
}

.stars-container {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-direction: row;
}

.star {
    color: #ddd;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    width: 32px;
    height: 32px;
}

.star svg {
    width: 100%;
    height: 100%;
    transition: all 0.2s ease;
    fill: currentColor;
}

.star:hover svg {
    color: #ffc107;
    transform: scale(1.1);
}

.star.active svg {
    color: #ffc107 !important;
    transform: scale(1);
}

.star.clicked svg {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

.rating-text {
    font-size: 14px;
    color: #666;
    min-height: 20px;
    font-weight: 500;
}

.star:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
    padding: 8px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-label:hover .checkmark {
    border-color: var(--primary-color);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
}

.btn.large {
    padding: 14px 24px;
    font-size: 16px;
}

.btn.secondary {
    background: #6b7280;
    color: white;
    border-color: #6b7280;
}

.btn.secondary:hover {
    background: #4b5563;
    border-color: #4b5563;
}

/* Success Actions */
.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 40px 0;
}

/* Review Guidelines */
.review-guidelines {
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 40px;
}

.review-guidelines h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
}

.review-guidelines ul {
    margin: 0;
    padding-left: 20px;
    color: #666;
}

.review-guidelines li {
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Notices */
.notice.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.notice.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 768px) {
    .container { 
        padding: 16px; 
    }
    
    .hero { 
        padding: 24px 16px 16px 16px;
    }
    
    .brand img { 
        height: 56px; 
    }
    
    h1.hero-title { 
        font-size: 20px; 
        margin-bottom: 8px; 
    }
    
    p.hero-sub { 
        font-size: 14px; 
        margin-bottom: 20px; 
    }
    
    .sticky-search {
        position: static !important;
        margin: 0 0 16px 0 !important;
    }
    
    .searchbar { 
        flex-direction: row; 
        padding: 8px; 
    }
    
    .searchbar input[type="search"] { 
        padding: 12px 10px; 
    }
    
    .btn { 
        min-height: 44px; 
        padding: 10px 14px; 
    }
    
    .actions,
    .form-actions,
    .success-actions {
        flex-direction: column;
    }
    
    .actions .btn,
    .form-actions .btn,
    .success-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .cards { 
        grid-template-columns: 1fr; 
        gap: 12px; 
    }
    
    .form-section {
        padding: 20px;
    }
    
    .form-row.radio-row {
        gap: 12px;
    }
    
    .radio-group {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
    
    .stars-container {
        gap: 2px;
    }
    
    .star {
        width: 28px;
        height: 28px;
    }
    
    .bl-suggest {
        position: relative;
        top: 0;
        margin-top: 4px;
        border-radius: 8px;
    }
}

@media (max-width: 640px) {
    .hero { 
        padding: 20px 12px 12px 12px; 
    }
    
    .brand img { 
        height: 48px; 
    }
    
    button, .btn, input, select, textarea { 
        min-height: 44px; 
    }
}

/* ===== ACCESSIBILITY & PREFERENCES ===== */
@media (prefers-reduced-motion: reduce) {
    * { 
        transition: none !important; 
        animation: none !important; 
    }
    
    .btn:hover {
        transform: none;
    }
}

/* ===== iOS SPECIFIC FIXES ===== */
@supports (height: 100dvh) {
    .hero { 
        min-height: unset; 
    }
}

/* ===== WHITE LINES FIX ===== */
.sticky-search::before,
.sticky-search::after,
.sticky-search *::before,
.sticky-search *::after {
    display: none !important;
    content: none !important;
}

.sticky-search {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    outline: none !important;
}

.hero {
    border-bottom: none;
}
.image-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.image-preview .preview-item {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.image-preview .preview-item img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* ключевое, чтобы не растягивались */
  display: block;
}
.image-preview .remove-image {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

.user-profile-link:hover {
    opacity: 0.8;
}

.user-name {
    font-weight: 500;
}

.profile-form {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Google Login mygtukas */
.bl-login-required {
    text-align: center;
    padding: 40px 20px;
}

.login-prompt h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.login-prompt p {
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1em;
}

.btn-google-login {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: white;
    color: #333;
    text-decoration: none;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.btn-google-login:hover {
    border-color: #4285F4;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2);
    transform: translateY(-2px);
}

.login-benefits {
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
}

.login-benefits h4 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.login-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.login-benefits li {
    padding: 8px 0;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}

.login-benefits li:last-child {
    border-bottom: none;
}

/* Atnaujinti žvaigždžių stilius */
.bl-rating-section {
    margin-bottom: 25px;
}

.bl-rating-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #333;
    font-size: 1.1em;
}

.bl-stars {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.bl-star {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 32px;
    line-height: 1;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.bl-star .star-icon {
    color: #ddd;
    transition: all 0.2s ease;
}

.bl-star.active .star-icon {
    color: #ffc107;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}

.bl-star.hover .star-icon {
    color: #ffd54f;
}

.bl-star:hover .star-icon {
    transform: scale(1.2);
}

.bl-stars-tip {
    display: block;
    font-size: 14px;
    color: #666;
    font-style: italic;
    margin-top: 5px;
}

/* Komentaro sekcija */
.bl-comment-section {
    margin-bottom: 20px;
}

.bl-comment-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #333;
    font-size: 1.1em;
}

.bl-comment-textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.bl-comment-textarea:focus {
    border-color: #4285F4;
    outline: none;
}

.bl-comment-counter {
    text-align: right;
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* Prisijungusio vartotojo informacija */
.logged-in-as {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid #FFD400;
}

/* Animacijos */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Formos validacijos stilius */
.bl-comment-form .form-submit {
    margin-top: 25px;
}

.bl-comment-form .submit {
    background: #FFD400;
    color: #131313;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bl-comment-form .submit:hover {
    background: #E6C100;
    transform: translateY(-2px);
}
/* === Live Phone Suggest === */
.bl-suggest{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 6px);
  max-height: 340px;
  overflow:auto;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  border-radius:10px;
  padding:6px;
  z-index: 9999;
}
.bls-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px;
  border-radius:8px;
  text-decoration:none;
  color:inherit;
}
.bls-item:hover,
.bls-item.is-active{ background:#f7f7f9; }
.bls-thumb{
  width:42px; height:42px; flex:0 0 42px; border-radius:8px; object-fit:cover; background:#eee;
}
/* bilo */
.bls-thumb--ph{ display:inline-block; }
.bls-text{ display:flex; flex-direction:column; min-width:0; }
.bls-title{ font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bls-subtitle{ font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bls-phone{ font-size:12px; opacity:.9; }

/* ======= Центрированный логотип в шапке (десктоп) ======= */
.bl-site-header{ padding:18px 16px 10px; }         /* общий паддинг для десктопа */
.bl-header-inner{ max-width:1100px; margin:0 auto; display:grid; place-items:center; }
.bl-brand{ display:inline-flex; align-items:center; text-decoration:none; }
.bl-brand-img{ display:block; height:128px; width:auto; }  /* размер логотипа на десктопе */

/* ======= Мобильные правки: сделать лого больше и опустить ниже =======
   - Увеличиваем высоту логотипа до 96px (было 56px)
   - Поднимаем верхний паддинг шапки, чтобы отступ от края/«чёлки» был комфортным
   - env(safe-area-inset-top) учитывает вырез на iPhone (не мешает на Android)
*/
@media (max-width:768px){
  .bl-site-header{
    /* было: 18px сверху; стало: 34px + safe-area для выреза */
    padding: calc(34px + env(safe-area-inset-top)) 16px 12px;
  }
  .bl-brand-img{
    /* было: 56px; теперь крупнее — меняй 96px на 84/90/104 по вкусу */
    height: 96px;
    width: auto; /* на всякий случай фиксируем пропорции */
  }
  .bl-header-inner{
    /* чуть опускаем блок логотипа, добавляя «воздуха» */
    margin-top: 8px; /* было 0/6px — можно выставить 0, если не нужно */
  }
}
/* === Subtle gray site-wide gradient (no yellow) === */
:root{
  --gray-start: #f3f4f6; /* верх — приятный серый (Tailwind gray-100 примерно) */
  --gray-end:   #fafafa; /* низ — чуть светлее */
}

html, body { height: 100%; }
body{
  background: linear-gradient(180deg, var(--gray-start) 0%, var(--gray-end) 100%) fixed;
}

/* Хедер/футер прозрачные, чтобы не было «стыков» */
.bl-site-header,
.site-footer,
.site-footer .footer-inner{
  background: transparent !important;
  box-shadow: none;
}

/* Контентные блоки остаются белыми для контраста */
.bl-card,
.specialist-main-card,
.section,
.widget,
.article,
.hero{
  background: #fff;
}

/* Центрированные ссылки в футере (если используешь) */
.site-footer .footer-links{
  display:flex;justify-content:center;align-items:center;gap:20px;
}
.site-footer .footer-links a{
  color:#111;text-decoration:none;font-weight:600;
  padding:6px 10px;border-radius:8px;transition:transform .15s ease, background .15s ease;
}
.site-footer .footer-links a:hover{ transform:translateY(-1px);background:rgba(0,0,0,.03); }
/*123*/
/* === Remove white stripes on hero/search and footer links === */

/* 1) Герой и поиск — без белого блока */
.home .hero,
.page-template-front-page .hero{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding-top: 24px; /* чуть воздуха вместо белой панели */
}

/* Сам поисковый бар — «воздушный», но без белой плашки на всю ширину */
.home .searchbar,
.page-template-front-page .searchbar{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Поле поиска — мягко-серое, чтобы читалось на общем фоне */
.home .searchbar input[name="s"],
.page-template-front-page .searchbar input[name="s"]{
  background: #f1f3f5;               /* светло-серый */
  border: 1px solid #e3e6ea;
  border-radius: 14px;
  padding: 14px 16px;
  height: 48px;
  box-shadow: none;
}

/* Кнопка поиска — без заливки всей полосы */
.home .searchbar button,
.page-template-front-page .searchbar button{
  height: 48px;
  border-radius: 12px;
  box-shadow: none;
}

/* 2) Футер: блок с 3 ссылками без белого фона / полосы */
.site-footer,
.site-footer .footer-inner,
.footer-links-bar{
  background: transparent !important;
  box-shadow: none !important;
}

/* Тонкая разделительная линия вместо белой плашки */
.footer-links-bar{
  padding: 14px 0;
  border-top: 1px solid rgba(17,17,17,.06);
}

/* Сами ссылки по центру, без «плашки» */
.footer-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}
.footer-links a{
  color: #111;
  text-decoration: none;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 8px;
  transition: transform .15s ease, background .15s ease;
}
.footer-links a:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.03); /* еле заметно */
}

/* 3) На всякий — чтобы ничего не «подкрашивало» фон секций */
.home .bl-card.hero,
.home .bl-card.hero .wrap{
  background: transparent !important;
  box-shadow: none !important;
}

/* 4) Общий фон сайта — мягкий серый градиент (как договаривались) */
:root{
  --gray-start: #f3f4f6;
  --gray-end:   #fafafa;
}
html, body { height: 100%; }
body{
  background: linear-gradient(180deg, var(--gray-start) 0%, var(--gray-end) 100%) fixed !important;
}
/* === Search input stays white === */
.home .searchbar input[name="s"],
.page-template-front-page .searchbar input[name="s"]{
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* (опционально) выпадающие подсказки — тоже белые */
.bl-suggest{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.bl-suggest .bl-suggest-item{ padding: 10px 12px; display:block; }
.bl-suggest .bl-suggest-item.active{ background: #f7f7f7; }

/* Переносим кнопку „Paieška“ ПОД строку поиска только на мобиле */
@media (max-width: 768px){
  .sticky-search .searchbar{
    display: flex;
    flex-wrap: wrap;        /* позволяем перенос */
    align-items: center;
  }
  .sticky-search .searchbar input[type="search"]{
    flex: 1 1 100%;         /* инпут на всю ширину первой строкой */
  }
  .sticky-search .searchbar .btn.primary{
    order: 2;               /* кнопка идет после инпута */
    margin-top: 10px;       /* чуть ниже */
    align-self: center;     /* по центру строки */
    width: auto;            /* НЕ меняем размер кнопки */
  }
}
/* ===== Breadcrumbs ===== */
.bl-bc{
  --bc-fg:#4b5563;         /* текст */
  --bc-link:#0b68b8;       /* ссылка */
  --bc-sep:#c9ccd1;        /* разделитель */
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:14px; line-height:1.4; color:var(--bc-fg);
  margin:8px 0 18px 0;
}
.bl-bc__item{display:inline-flex;align-items:center;max-width:100%}
.bl-bc__link{color:var(--bc-link);text-decoration:none;display:inline-block;max-width:100%}
.bl-bc__link:hover{text-decoration:underline}
.bl-bc__current{font-weight:600;color:#111;display:inline-block;max-width:100%}
.bl-bc__sep{color:var(--bc-sep);user-select:none}
@media (max-width:640px){
  .bl-bc{gap:8px;font-size:13px}
  .bl-bc__sep{margin:0 2px}
}
/* Контейнер поля со спецкнопкой */
.form-row--specialty .specialty-input-wrap{
  position: relative;         /* якорь для абсолютной кнопки и попапов */
  display: block;             /* убираем flex, чтобы не влияло на позиционирование */
  width: 100%;
}

/* Сам input */
.form-row--specialty .form-input{
  width: 100%;
  padding-right: 112px;       /* место под кнопку (увеличил, чтобы текст не упирался) */
  box-sizing: border-box;
}

/* Кнопка Rinktis — фиксируем справа внутри инпута */
.specialty-pick-btn{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;             /* чтобы не «вытягивало» высоту */
  display: inline-flex;       /* ровное выравнивание текста */
  align-items: center;
  gap: 6px;
  z-index: 2;                 /* поверх инпута */
}
.specialty-pick-btn:hover{ background:#f8fafc; }

/* Подсказки под инпутом */
.suggestions-dropdown{
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin-top: 6px;
  z-index: 9999;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  overflow: auto;
  max-height: 300px;
  display: none;
}
.suggestion-item{
  padding: 10px 12px; cursor: pointer; line-height: 1.25;
}
.suggestion-item:hover, .suggestion-item.active{ background:#f6f7fb; }
.suggestion-item .hl{ background:#fff6bf; border-radius:4px; }

/* Попап «Rinktis» */
.specialty-picker{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(520px, 96vw);
  z-index: 10000;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
  padding: 10px;
  display: block;
}
.specialty-picker[hidden]{ display: none !important; }

.sp-head{ padding: 6px 6px 10px; }
.sp-filter{
  width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; box-sizing: border-box;
}
.sp-list{
  max-height: 360px; overflow: auto; border-top: 1px solid #f1f5f9; padding-top: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
@media (max-width: 720px){ .sp-list{ grid-template-columns: 1fr; } }

.sp-item{
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; cursor: pointer; background: #fff;
}
.sp-item:hover{ background:#f8fafc; }

/* ===== Pretty Uploader ===== */
.bl-uploader{ --radius:14px; --shadow:0 12px 30px rgba(0,0,0,.08); }
.bl-uploader__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.bl-uploader__title{ display:flex; gap:10px; align-items:center; font-size:15px; }
.bl-uploader__count{ background:#111; color:#fff; border-radius:999px; padding:2px 8px; font-size:12px; }
.bl-uploader__tips{ color:#6b7280; display:flex; gap:10px; font-size:12px; }

.bl-drop{
  border:2px dashed #e5e7eb; border-radius:var(--radius);
  padding:18px; background:linear-gradient(180deg,#fff, #fafafa);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  box-shadow:var(--shadow);
  transition:border-color .2s, background .2s, transform .08s ease-in-out;
}
.bl-drop:focus{ outline:3px solid #ffd40055; outline-offset:2px; }
.bl-drop.dragover{ border-color:#FFD400; background:#fffbe6; transform:scale(0.998); }

.bl-drop__icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:#111; color:#fff; box-shadow:inset 0 0 0 1px #00000010; }
.bl-drop__text{ display:flex; flex-direction:column; line-height:1.2; }
.bl-drop__text strong{ font-size:15px; }
.bl-drop__text span{ font-size:12px; color:#6b7280; }
.bl-drop__btn.btn.small{
  background:#FFD400; border:1px solid #E6C100; color:#111; border-radius:10px; padding:8px 12px; cursor:pointer;
}
.bl-drop__btn.btn.small:hover{ filter:brightness(.98); }

.bl-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:14px;
}
@media (max-width:1200px){ .bl-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:980px){ .bl-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:760px){ .bl-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .bl-grid{ grid-template-columns:repeat(2,1fr); } }

.img-card{
  position:relative; border-radius:12px; overflow:hidden; background:#f3f4f6; aspect-ratio:1/1;
  box-shadow:0 10px 20px rgba(0,0,0,.06); border:1px solid #e5e7eb;
}
.img-card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-card__bar{
  position:absolute; left:8px; right:8px; top:8px; display:flex; gap:6px; justify-content:flex-end; align-items:center;
}
.img-chip{
  background:rgba(17,17,17,.72); color:#fff; border-radius:999px; padding:4px 8px; font-size:11px; backdrop-filter: blur(6px);
}
.img-del{
  width:30px; height:30px; border-radius:999px; border:1px solid rgba(0,0,0,.15);
  background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.img-del:hover{ transform:scale(1.04); }
.img-del:active{ transform:scale(0.98); }

.img-card__progress{
  position:absolute; left:0; right:0; bottom:0; height:3px; background:#e5e7eb;
}
.img-card__progress > i{
  display:block; height:100%; width:0%; background:#FFD400; transition:width .15s linear;
}
.img-card--loading .img-card__img{ filter:grayscale(1) contrast(.9) brightness(.98); opacity:.7; }

.img-empty{
  display:flex; align-items:center; justify-content:center; color:#9ca3af; font-size:13px; border:1px dashed #e5e7eb;
  border-radius:12px; padding:14px;
}
/* ===== Confirm checkbox (clean) ===== */
.confirm-card{
  display:flex; align-items:center; gap:16px;
  padding:14px; border:1px solid #e5e7eb; border-radius:12px;
  background:#fcfcfd; box-shadow:0 6px 16px rgba(0,0,0,.04);
  cursor:pointer; user-select:none; width:100%;
}

/* скрытый input */
.confirm-card input{ position:absolute; opacity:0; pointer-events:none; }

/* квадрат слева */
.cc-mark{
  width:20px; height:20px; flex:0 0 20px; margin:0;
  border:1.5px solid #cbd5e1; border-radius:6px; background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s, transform .06s;
}
.confirm-card:hover{ border-color:#dcdfe4; background:#fff; }
.confirm-card:active .cc-mark{ transform:scale(0.98); }

/* галочка */
.confirm-card input:checked + .cc-mark{
  background:#111; border-color:#111;
}
.confirm-card input:checked + .cc-mark::after{
  content:""; width:10px; height:10px; display:block;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="%23fff" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') no-repeat center / contain;
  background:#fff;
}

/* текст справа */
.cc-text{
  display:flex; flex-direction:column; justify-content:center;
  flex:1 1 auto; min-width:0; line-height:1.4; color:#0f172a; overflow-wrap:break-word;
}
.cc-text strong{ display:block; font-weight:700; font-size:14px; }
.cc-footnote{
  display:block; margin-top:6px; font-size:12.5px; color:#6b7280;
  background:#f9fafb; border:1px dashed #e5e7eb; border-radius:10px; padding:8px 10px;
}

/* мобильные мелочи */
@media (max-width:520px){
  .confirm-card{ padding:12px; gap:14px; }
  .cc-text strong{ font-size:13.5px; }
  .cc-footnote{ font-size:12px; }
}
/* Confirm row: принудительно в одну линию */
.form-section label.confirm-card{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;
}
.form-section label.confirm-card .cc-mark{ margin-top:0; flex:0 0 20px; }
.form-section label.confirm-card .cc-text{
  display:flex; flex-direction:column; justify-content:center;
  flex:1 1 auto; min-width:0;
}
/* === Apeliacija form: centered, clean card === */
.bl-apeliacija{
  max-width: 720px;           /* центр + фиксированная ширина */
  margin: 24px auto;          /* центрируем */
  padding: 0 12px;            /* лёгкие поля по бокам на мобильных */
}

.bl-apeliacija .bl-form{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  padding:22px;
}

.bl-apeliacija .ap-header{
  margin: 0 0 14px 0;
  font-size: 22px;
  line-height: 1.25;
  color:#111827;
}

.bl-apeliacija .ap-header a{
  color:#0b68b8;
  text-decoration:none;
}
.bl-apeliacija .ap-header a:hover{ text-decoration:underline; }

.bl-apeliacija .bl-row{ margin-bottom:14px; }
.bl-apeliacija label{
  display:block; margin-bottom:6px; font-weight:700; color:#111827;
}

.bl-apeliacija input[type="text"],
.bl-apeliacija input[type="email"],
.bl-apeliacija textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-sizing:border-box;
  background:#fff;
  transition:border-color .15s, box-shadow .15s, background .15s;
}

.bl-apeliacija input[type="text"]:focus,
.bl-apeliacija input[type="email"]:focus,
.bl-apeliacija textarea:focus{
  outline:none;
  border-color:#f1c40f;               /* брендовый акцент */
  box-shadow:0 0 0 3px rgba(255,212,0,.25);
  background:#fff;
}

.bl-apeliacija textarea{ min-height:140px; resize:vertical; }

/* Button */
.bl-apeliacija .btn{
  min-height:44px;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  border:1px solid #E6C100;
  background:#FFD400;
  color:#111;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .12s ease, filter .12s ease;
}
.bl-apeliacija .btn:hover{ filter:brightness(.98); transform:translateY(-1px); }

/* Status text справа от кнопки — на одной линии, но красиво складывается на мобилке */
#bl-appeal-status{
  font-size:14px; color:#6b7280; margin-left:10px; align-self:center;
}

/* Компоновка «кнопка + статус» в ряд */
.bl-apeliacija .bl-row:last-child{
  display:flex; gap:10px; flex-wrap:wrap;
}

/* Мобильные правки */
@media (max-width: 520px){
  .bl-apeliacija{ margin:16px auto; padding:0 8px; }
  .bl-apeliacija .bl-form{ padding:16px; border-radius:14px; }
  .bl-apeliacija .ap-header{ font-size:20px; }
  .bl-apeliacija .btn{ width:100%; }
  #bl-appeal-status{ margin-left:0; width:100%; margin-top:4px; }
}
/* --- Nice modal for review errors/success --- */
.bl-modal{position:fixed;inset:0;z-index:99999;display:none}
.bl-modal.show{display:block}
.blm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:saturate(120%) blur(2px)}
.blm-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:min(560px,92vw);background:#fff;border-radius:16px;padding:20px 18px 16px;
  box-shadow:0 30px 60px rgba(0,0,0,.25); border:1px solid #eef0f2;
}
.blm-card.is-error{border-color:#f2d6d6; box-shadow:0 30px 60px rgba(185,28,28,.15)}
.blm-close{
  position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:18px;line-height:1
}
.blm-content{color:#333;font-size:15px;line-height:1.5}
.blm-content h1,.blm-content h2,.blm-content h3{margin:0 0 8px 0;line-height:1.2}
.blm-content p{margin:8px 0}
.blm-content a{color:#0b68b8;text-decoration:none}
.blm-content a:hover{text-decoration:underline}
.bl-bc{ 
  clear: both;          /* не заезжают под флоаты сверху */
  margin: 8px 0 18px;   /* восстанавливаем отступы, если схлопнулись */
}
.specialist-page .wrap .bl-bc{ 
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; 
}
/* Breadcrumbs compatibility + hardening */
.breadcrumbs.bl-bc{clear:both; margin:8px 0 18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.breadcrumbs.bl-bc .bl-bc__item{display:inline-flex; align-items:center; max-width:100%}
.breadcrumbs.bl-bc .bl-bc__link{display:inline-block; text-decoration:none}
.breadcrumbs.bl-bc .bl-bc__link:hover{text-decoration:underline}
.breadcrumbs.bl-bc .bl-bc__current{font-weight:600}
.breadcrumbs.bl-bc .bl-bc__sep{user-select:none}
/* Breadcrumb (fallback for <nav class="breadcrumb">) */
.breadcrumb{margin:10px 0 16px;font-size:.95rem;color:#374151;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.breadcrumb a{color:#0f172a;text-decoration:none;display:inline-block;max-width:100%}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .separator{margin:0 6px;color:#9ca3af;user-select:none}
.breadcrumb > span:not(.separator){color:#6b7280;font-weight:600;display:inline-block;max-width:100%}
.pill-ok[hidden]{ display:none !important; }
/* Сетка кнопок-«бейджей» как у specialybės */
.chips-grid{
  display:flex; flex-wrap:wrap;
  gap:8px; justify-content:center;
  margin-top:8px;
}

/* Если у тебя уже есть .badge — этот блок просто чуть улучшит «кнопочный» вид */
.badge.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid #e9ecef;
  background:#fff; color:#111; text-decoration:none;
  font-weight:600; font-size:14px; line-height:1;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge.chip:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  border-color:#e3e6ea;
}
.chips-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}

/* Значок количества рядом с названием */
.badge.chip.term{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;border:1px solid #e9ecef;background:#fff;
  color:#111;text-decoration:none;font-weight:600;font-size:14px;line-height:1;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.badge.chip.term:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.06);border-color:#e3e6ea}

.badge.chip.term .term-count{
  display:inline-block;min-width:22px;padding:3px 6px;border-radius:999px;
  background:#FFD400;color:#111;border:1px solid #E6C100;font-size:12px;font-weight:700;
}
/* Кнопочные CTA в карточках */
.card-footer{margin-top:12px;text-align:center}
.cta-row{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap
}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:12px;
  background:#fff;border:1px solid #e5e7eb;color:#111;
  text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease
}
.cta-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.08)
}
.cta-btn:active{transform:translateY(0)}
.cta-btn .arrow{font-size:16px;line-height:1}
.cta-btn.primary{
  background:#FFD400;border-color:#E6C100;color:#111;
}
@media (max-width:768px){
  .cta-btn{width:100%;justify-content:center}
}
/* CTA buttons — stronger specificity + выравнивание */
.cards .card .card-footer { margin-top: 12px; text-align: center; }
.cards .card .card-footer .cta-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:6px; }

.cards .card .card-footer .cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px;
  background:#fff; border:1px solid #e5e7eb; color:#111;
  text-decoration:none !important;
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  line-height:1; font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.cards .card .card-footer .cta-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.08); }
.cards .card .card-footer .cta-btn:active{ transform:translateY(0); }

.cards .card .card-footer .cta-btn.primary{
  background:#FFD400; border-color:#E6C100; color:#111;
}

.cards .card .card-footer .cta-btn .arrow{ font-size:16px; line-height:1; display:inline-block; }
@media (max-width:768px){
  .cards .card .card-footer .cta-btn{ width:100%; justify-content:center; }
}
.bl-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 14px;
  background: #111827;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 9999;
}
.bl-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}