/*
 * Copyright (c) <b>2026.</b> Xtreme.bg Ltd. All rights Reserved<br>
 * Date:  <b>3/1/26, 10:31 AM</b><br>
 * <b>shop_blogs.css</b> is a part of the project <b>Xtreme.bg</b> based on <b>SkyCore 6</b><br>
 * Any part of this file cannot be copied and/or distributed without the express permission of <b>Sand</b><br>
 * Last Modified: <b>3/1/26, 10:31 AM</b><br>
 */

.xtr_wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.xtr_wrap a { text-decoration: none; }

.xtr_wrap {
  --xtr-font:       'Roboto Condensed', sans-serif;
  --xtr-navy:       #1a2535;
  --xtr-blue:       #1565c0;
  --xtr-blue-lt:    #e3edf9;
  --xtr-orange:     #e8722a;
  --xtr-white:      #ffffff;
  --xtr-bg:         #f2f4f7;
  --xtr-border:     #dde2ea;
  --xtr-gray-50:    #f8f9fb;
  --xtr-gray-100:   #eef0f4;
  --xtr-gray-400:   #8c97a8;
  --xtr-gray-600:   #4e5a6b;
  --xtr-text:       #1c2333;
  --xtr-radius:     6px;
  --xtr-shadow-md:  0 4px 16px rgba(0,0,0,.12);

  font-family: var(--xtr-font);
  color: var(--xtr-text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--xtr-bg);
  padding: 20px 0 60px;
  margin-top:50px;
  margin-bottom:50px;
}

.xtr_inner { padding: 0 20px; }

.xtr_page_header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.xtr_page_title { font-size: 23px; font-weight: 700; color: var(--xtr-navy); letter-spacing: -.01em; }
.xtr_page_title span { color: var(--xtr-orange); }

.xtr_layout { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }

@media (max-width: 1200px) {
  .xtr_layout { grid-template-columns: 1fr; }
  .xtr_sidebar { display: none; }
}

.xtr_sidebar { background: var(--xtr-white); border: 1px solid var(--xtr-border); border-radius: var(--xtr-radius); overflow: hidden; position: sticky; top: 16px; }
.xtr_sidebar_head { background: var(--xtr-navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 9px 13px; }
.xtr_sidebar_cats { padding: 4px 0; }

.xtr_sidebar_cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 13px; font-size: 16px; font-weight: 500; color: var(--xtr-gray-600); cursor: pointer; border-left: 3px solid transparent; transition: background .14s, color .14s, border-color .14s; }
.xtr_sidebar_cat:hover { background: var(--xtr-gray-50); color: var(--xtr-blue); }
.xtr_sidebar_cat.xtr_active { background: var(--xtr-blue-lt); color: var(--xtr-blue); border-left-color: var(--xtr-blue); font-weight: 700; }

.xtr_sidebar_count { background: var(--xtr-gray-100); color: var(--xtr-gray-400); font-size: 13px; font-weight: 700; padding: 2px 7px; border-radius: 20px; min-width: 22px; text-align: center; transition: background .14s, color .14s; }
.xtr_sidebar_cat.xtr_active .xtr_sidebar_count { background: var(--xtr-blue); color: #fff; }
.xtr_sidebar_divider { height: 1px; background: var(--xtr-border); margin: 3px 0; }

.xtr_toolbar { background: var(--xtr-white); border: 1px solid var(--xtr-border); border-radius: var(--xtr-radius); padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.xtr_toolbar_cats { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }

.xtr_cat_pill { font-family: var(--xtr-font); font-size: 15px; font-weight: 600; padding: 4px 11px; border-radius: 4px; border: 1px solid var(--xtr-border); background: var(--xtr-white); color: var(--xtr-gray-600); cursor: pointer; transition: all .14s; }
.xtr_cat_pill:hover { background: var(--xtr-blue-lt); border-color: var(--xtr-blue); color: var(--xtr-blue); }
.xtr_cat_pill.xtr_active { background: var(--xtr-blue); border-color: var(--xtr-blue); color: #fff; }

.xtr_toolbar_right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.xtr_results_count { font-size: 15px; color: var(--xtr-gray-400); white-space: nowrap; }
.xtr_results_count strong { color: var(--xtr-navy); font-weight: 700; }

.xtr_sort { font-family: var(--xtr-font); font-size: 15px; font-weight: 600; border: 1px solid var(--xtr-border); background: var(--xtr-white); color: var(--xtr-gray-600); padding: 4px 9px; border-radius: 4px; cursor: pointer; outline: none; }

.xtr_view_toggle { display: flex; border: 1px solid var(--xtr-border); border-radius: 4px; overflow: hidden; }
.xtr_view_btn { background: var(--xtr-white); border: none; padding: 5px 9px; cursor: pointer; color: var(--xtr-gray-400); transition: background .14s, color .14s; line-height: 1; display: flex; align-items: center; justify-content: center; }
.xtr_view_btn + .xtr_view_btn { border-left: 1px solid var(--xtr-border); }
.xtr_view_btn.xtr_active { background: var(--xtr-navy); color: #fff; }
.xtr_view_btn svg { width: 15px; height: 15px; fill: currentColor; }

.xtr_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1900px) { .xtr_grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1250px) { .xtr_grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px)  { .xtr_grid { grid-template-columns: 1fr; } }

.xtr_card { background: var(--xtr-white); border: 1px solid var(--xtr-border); border-radius: var(--xtr-radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .18s, box-shadow .18s; cursor: pointer; }
.xtr_card:hover { border-color: #abc3e0; box-shadow: var(--xtr-shadow-md); }

.xtr_card_img { width: 100%; aspect-ratio: 16/9; display: block; border-bottom: 1px solid var(--xtr-border); flex-shrink: 0; }
.xtr_card_body { padding: 12px; display: flex; flex-direction: column; flex: 1; background: var(--xtr-gray-100); }
.xtr_card_meta { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }

.xtr_card_cat { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px 2px 7px; border-radius: 3px; background-color: #1696EF; color: white;}
.xtr_cat_review  { background: #dbeafe; color: #1d4ed8; }
.xtr_cat_compare { background: #fce7f3; color: #9d174d; }
.xtr_cat_news    { background: #dcfce7; color: #166534; }
.xtr_cat_guide   { background: #fff7ed; color: #c2410c; }
.xtr_cat_top     { background: #f3e8ff; color: #7e22ce; }

.xtr_card_date { font-size: 14px; color: var(--xtr-gray-400); margin-left: auto; }
.xtr_card_title { font-size: 17px; font-weight: 700; color: var(--xtr-navy); line-height: 1.35; margin-bottom: 5px; transition: color .15s; }
.xtr_card:hover .xtr_card_title { color: var(--xtr-blue); }
.xtr_card_excerpt { font-size: 15px; color: var(--xtr-gray-600); line-height: 1.55; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.xtr_card_footer { display: flex; align-items: center; justify-content: space-between;border-top: 1px solid var(--xtr-gray-100); }
.xtr_card_read { flex:1; font-size: 14px; color: var(--clr-btn-end); }
.xtr_card_link { font-size: 14px; font-weight: 700; color: var(--xtr-orange); letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 3px; transition: gap .15s; margin-right:5px;}
.xtr_card:hover .xtr_card_link { gap: 5px; }
.xtr_list_wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.xtr_list_card { background: var(--xtr-white); border: 1px solid var(--xtr-border); border-radius: var(--xtr-radius); display: grid; grid-template-columns: 4fr 190px; align-items: center; cursor: pointer; overflow: hidden; transition: border-color .18s, box-shadow .18s; }
@media (max-width:1000px) { .xtr_list_num{display:none;} .xtr_list_card {grid-template-columns: 1fr}}
.xtr_list_card:hover { border-color: #abc3e0; box-shadow: 0 2px 10px rgba(0,0,0,.09); }
.xtr_list_card_left { display: flex; align-items: center; gap: 14px; padding: 12px 14px; flex: 1; min-width: 0; }
.xtr_list_num { font-size: 16px; font-weight: 700; color: var(--xtr-gray-400); min-width: 22px; text-align: right; flex-shrink: 0; }
.xtr_list_info { flex: 1; min-width: 0; }
.xtr_list_meta { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.xtr_list_title { font-size: 17px; font-weight: 700; color: var(--xtr-navy); margin-bottom: 3px;  text-overflow: ellipsis; transition: color .15s; }
.xtr_list_card:hover .xtr_list_title { color: var(--xtr-blue); }
.xtr_list_excerpt { font-size: 15px; color: var(--xtr-gray-600);  text-overflow: ellipsis; }
.xtr_list_card_right { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-left: 1px solid var(--xtr-border); flex-shrink: 0; }
.xtr_list_read { flex:1; font-size: 14px; color: var(--clr-btn-end); white-space: nowrap; }
.xtr_list_link { font-size: 14px; font-weight: 700; color: var(--xtr-orange); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; margin-right:5px;}

.xtr_skeleton { background: linear-gradient(90deg, var(--xtr-gray-100) 25%, #e8eaed 50%, var(--xtr-gray-100) 75%); background-size: 200% 100%; animation: xtr_shimmer 1.2s infinite; border-radius: 4px; }
@keyframes xtr_shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.xtr_skeleton_card { background: var(--xtr-white); border: 1px solid var(--xtr-border); border-radius: var(--xtr-radius); overflow: hidden; }
.xtr_skeleton_img { width: 100%; aspect-ratio: 16/9; }
.xtr_skeleton_body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.xtr_skeleton_line { height: 12px; border-radius: 3px; }

.xtr_empty { text-align: center; padding: 44px 20px; color: var(--xtr-gray-400); background: var(--xtr-white); border: 1px solid var(--xtr-border); border-radius: var(--xtr-radius); }
.xtr_empty_icon { font-size: 34px; margin-bottom: 8px; }
.xtr_empty_text { font-size: 17px; font-weight: 600; color: var(--xtr-gray-600); }
.xtr_error { text-align: center; padding: 32px 20px; color: #c62828; background: #fff5f5; border: 1px solid #ffcdd2; border-radius: var(--xtr-radius); font-weight: 600; font-size: 17px; }

.xtr_pagination { display: flex; align-items: center; justify-content: center; gap: 4px; }
.xtr_page_btn { font-family: var(--xtr-font); font-size: 16px; font-weight: 600; min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: 4px; border: 1px solid var(--xtr-border); background: var(--xtr-white); color: var(--xtr-gray-600); cursor: pointer; transition: all .14s; }
.xtr_page_btn:hover { border-color: var(--xtr-blue); color: var(--xtr-blue); background: var(--xtr-blue-lt); }
.xtr_page_btn.xtr_active { background: var(--xtr-blue); border-color: var(--xtr-blue); color: #fff; }
.xtr_page_btn:disabled { opacity: .35; pointer-events: none; }
.xtr_page_dots { padding: 0 3px; color: var(--xtr-gray-400); font-size: 13px; letter-spacing: 2px; }