/* Panical Installation Guides Lite frontend styles
 * Cleaned from the previous accumulated version blocks.
 * Desktop keeps the existing appearance; 1024px and below use the same compact layout as 768px.
 */

/* ==================================================
   Guide list page
   ================================================== */
.pig-guide-list-wrap{
  width:100%!important;
  max-width:1500px!important;
  margin:0 auto!important;
  padding:28px 20px 76px!important;
  color:#000!important;
  box-sizing:border-box!important;
}
.pig-guide-list-wrap *{box-sizing:border-box!important;}

.pig-guide-filter{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto 34px!important;
  padding:0!important;
}

.pig-search-wrap{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto 10px!important;
  display:flex!important;
  align-items:stretch!important;
  border:1px solid #000!important;
  border-radius:34px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:none!important;
  min-height:0!important;
}
.pig-search-wrap:focus-within{
  border-color:#000!important;
  box-shadow:0 14px 34px rgba(0,0,0,.055)!important;
}
.pig-search-wrap input[type="search"],
.pig-search-input{
  display:block!important;
  flex:1 1 auto!important;
  width:100%!important;
  height:66px!important;
  min-height:66px!important;
  border:0!important;
  border-radius:34px 0 0 34px!important;
  padding:0 28px 0 38px!important;
  background:#fff!important;
  color:#000!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:66px!important;
  outline:none!important;
  box-shadow:none!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.pig-search-wrap input[type="search"]::-webkit-search-decoration,
.pig-search-wrap input[type="search"]::-webkit-search-cancel-button,
.pig-search-wrap input[type="search"]::-webkit-search-results-button,
.pig-search-wrap input[type="search"]::-webkit-search-results-decoration{display:none!important;}
.pig-search-wrap input[type="search"]::placeholder,
.pig-search-input::placeholder{
  color:rgba(0,0,0,.46)!important;
  font-weight:800!important;
  opacity:1!important;
}
.pig-search-wrap input[type="search"]:focus,
.pig-search-input:focus{border:0!important;box-shadow:none!important;outline:none!important;}

.pig-search-wrap button,
.pig-search-wrap .pig-search-icon,
.pig-search-wrap button:hover,
.pig-search-wrap button:focus,
.pig-search-wrap button:active{
  position:relative!important;
  flex:0 0 104px!important;
  width:104px!important;
  height:66px!important;
  min-height:66px!important;
  margin:0!important;
  border:0!important;
  border-left:1px solid #000!important;
  border-radius:0 34px 34px 0!important;
  background:#000!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  box-shadow:none!important;
  padding:0!important;
  line-height:66px!important;
  transition:color .22s ease!important;
  transform:none!important;
  translate:none!important;
  top:auto!important;
  bottom:auto!important;
  animation:none!important;
  text-indent:0!important;
}
.pig-search-wrap button:before,
.pig-search-wrap button:after{display:none!important;}
.pig-search-wrap button svg,
.pig-search-wrap .pig-search-icon svg{display:block!important;width:32px!important;height:32px!important;}
.pig-search-wrap button:hover,
.pig-search-wrap button:focus,
.pig-search-wrap .pig-search-icon:hover,
.pig-search-wrap .pig-search-icon:focus{color:#ff1053!important;}
.pig-search-wrap button:hover svg,
.pig-search-wrap button:focus svg,
.pig-search-wrap .pig-search-icon:hover svg,
.pig-search-wrap .pig-search-icon:focus svg,
.pig-search-wrap button:hover svg path,
.pig-search-wrap button:focus svg path,
.pig-search-wrap .pig-search-icon:hover svg path,
.pig-search-wrap .pig-search-icon:focus svg path{fill:#ff1053!important;color:#ff1053!important;}

.pig-popular{
  max-width:none!important;
  margin:8px auto 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  padding:0 8px!important;
}
.pig-popular-label{
  display:inline-flex!important;
  align-items:center!important;
  color:rgba(0,0,0,.72)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
.pig-popular-tags{display:flex!important;flex-wrap:wrap!important;gap:7px!important;justify-content:flex-start!important;}
.pig-hot-tag,
.pig-hot-tag:hover,
.pig-hot-tag:focus,
.pig-hot-tag:active{
  display:inline-flex!important;
  align-items:center!important;
  border:1px solid rgba(0,0,0,.22)!important;
  border-radius:5px!important;
  background:#fafafa!important;
  color:rgba(0,0,0,.76)!important;
  padding:6px 11px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:650!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  box-shadow:none!important;
  transform:none!important;
  translate:none!important;
  text-indent:0!important;
  letter-spacing:0!important;
  transition:border-color .18s ease,color .18s ease!important;
}
.pig-hot-tag:hover,
.pig-hot-tag:focus,
.pig-hot-tag.is-active,
.pig-hot-tag:hover span,
.pig-hot-tag:focus span,
.pig-hot-tag.is-active span{background:#fff!important;border-color:#ff1053!important;color:#ff1053!important;}
.pig-hot-tag:before,.pig-hot-tag:after{display:none!important;}

.pig-toolbar{
  max-width:none!important;
  margin:8px auto 34px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:0!important;
}
.pig-result-bar{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  padding:0 8px!important;
  min-height:18px!important;
  text-align:left!important;
  order:1!important;
}
.pig-result-count{
  display:inline-flex!important;
  align-items:center!important;
  color:rgba(0,0,0,.68)!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
.pig-toolbar .pig-topic-filter{
  order:2!important;
  flex:0 0 auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:0!important;
}
.pig-category-wrap{position:relative!important;width:190px!important;min-width:0!important;max-width:190px!important;margin:0!important;}
.pig-category-wrap:after{
  content:""!important;
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  width:7px!important;
  height:7px!important;
  border-right:2px solid #000!important;
  border-bottom:2px solid #000!important;
  transform:translateY(-65%) rotate(45deg)!important;
  pointer-events:none!important;
}
.pig-category-wrap select,
.pig-category-select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 38px 0 14px!important;
  border:1px solid rgba(0,0,0,.24)!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#000!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:40px!important;
  outline:none!important;
  box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer!important;
}
.pig-category-wrap select:focus,
.pig-category-select:focus{border-color:#000!important;box-shadow:0 0 0 2px rgba(0,0,0,.06)!important;}

.pig-guide-list{display:flex;flex-direction:column;gap:12px;}
.pig-guide-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  padding:18px 22px;
  border:1px solid #e5e5e5;
  background:#fff;
  color:#111!important;
  text-decoration:none!important;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.pig-guide-card:hover{background:#fcfcfc;border-color:#ddd;box-shadow:0 6px 18px rgba(0,0,0,.035);}
.pig-card-main h3{margin:0 0 6px;font-size:20px;line-height:1.32;font-weight:800;text-decoration:none!important;}
.pig-card-main p{margin:0;color:#666;font-size:13px;line-height:1.4;}
.pig-card-main em{font-style:normal;margin:0 7px;color:#b0b0b0;}
.pig-card-tags{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:7px;max-width:390px;}
.pig-card-tags span{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid #dcdcdc;background:#fafafa;border-radius:5px;font-size:11px;font-weight:750;line-height:1;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em;}
.pig-guide-card .pig-guide-title,
.pig-guide-card .pig-guide-title span,
.pig-guide-card .pig-title,
.pig-guide-card .pig-title span,
.pig-guide-card h3,
.pig-guide-card h3 span,
.pig-guide-card h4,
.pig-guide-card h4 span,
.pig-guide-card .pig-guide-title a,
.pig-guide-card .pig-title a,
.pig-guide-card h3 a,
.pig-guide-card h4 a,
.pig-guide-card .pig-guide-title a:visited,
.pig-guide-card .pig-title a:visited,
.pig-guide-card h3 a:visited,
.pig-guide-card h4 a:visited{color:#000000!important;}
.pig-guide-card.is-hidden,
.pig-guide-card.is-page-hidden{display:none!important;}
.pig-empty{padding:24px;border:1px solid #e6e6e6;background:#fff;color:#666;}
.pig-no-results{max-width:none;margin:18px auto 0;padding:26px 28px;border:1px solid rgba(0,0,0,.12);background:#fafafa;color:rgba(0,0,0,.68);font-size:16px;line-height:1.6;font-weight:650;text-align:center;}
.pig-no-results[hidden],.pig-pagination[hidden]{display:none!important;}

.pig-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin:28px 0 0;flex-wrap:wrap;}
.pig-page-numbers{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.pig-page-link,
.pig-page-number{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 13px;border:1px solid #dcdcdc;background:#fff;color:#111!important;text-decoration:none!important;font-size:13px;font-weight:800;line-height:1;border-radius:5px;transition:border-color .18s ease,color .18s ease,background-color .18s ease;}
.pig-page-link{min-width:92px;}
.pig-page-link:hover,.pig-page-number:hover,.pig-page-number.is-current{border-color:#ff1053;color:#ff1053!important;background:#fff;text-decoration:none!important;}
.pig-page-link.is-disabled,.pig-page-link[disabled]{opacity:.42;cursor:not-allowed;border-color:#e2e2e2;color:#888!important;}
.pig-page-link.is-disabled:hover{border-color:#e2e2e2;color:#888!important;}
.pig-page-number{cursor:pointer;}

/* ==================================================
   Guide detail page
   ================================================== */
.pig-single-wrap{width:calc(100% - 48px);max-width:1280px;margin:0 auto;}
.pig-single-template-main{padding:38px 0 52px;background:#fff;}
.pig-back-link{display:inline-flex;align-items:center;margin:0 0 18px;color:#111!important;text-decoration:none!important;font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;transition:color .18s ease;}
.pig-back-link:hover{color:#ff1053!important;text-decoration:none!important;}
.pig-single-hero{display:grid;grid-template-columns:minmax(0,1fr) 160px!important;gap:22px!important;align-items:center;margin:0 0 30px!important;padding:22px!important;border:1px solid #e8e8e8;background:#fff;}
.pig-kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#777;margin-bottom:8px;}
.pig-single-heading h1{margin:0 0 12px;font-size:30px!important;line-height:1.18!important;font-weight:850;}
.pig-meta-line{display:flex;flex-wrap:wrap;gap:8px;}
.pig-meta-line span{display:inline-flex;align-items:center;min-height:28px;border:1px solid #ddd;background:#fafafa;padding:0 10px;border-radius:5px;font-size:12px;font-weight:700;color:#444;}
.pig-product-image{width:160px!important;justify-self:end;}
.pig-product-image img{width:100%;height:auto;display:block;}
.pig-resources{margin-top:26px;}
.pig-resources>h2,.pig-notes h2{font-size:22px;margin:0 0 16px;font-weight:850;}
.pig-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;}
.pig-resource-grid.is-single{grid-template-columns:minmax(0,1fr);}
.pig-resource-card{display:flex;flex-direction:column;border:1px solid #e3e3e3;background:#fff;padding:18px;min-height:100%;height:100%;}
.pig-resource-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.pig-resource-head span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:#111;color:#fff;border-radius:50%;font-size:12px;font-weight:800;}
.pig-resource-head h3{margin:0;font-size:19px;font-weight:850;}
.pig-video-frame,.pig-pdf-preview{position:relative;width:100%!important;height:auto!important;aspect-ratio:16/9!important;min-height:0!important;background:#f5f5f5;overflow:hidden;}
.pig-video-frame iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0;display:block!important;}
.pig-pdf-preview{border:1px solid #e6e6e6;display:flex;align-items:flex-start;justify-content:center;}
.pig-pdf-preview canvas{width:100%!important;height:100%!important;object-fit:cover;object-position:top center;display:block;image-rendering:auto;}
.pig-pdf-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#777;font-size:13px;line-height:1.55;background:#f5f5f5;}
.pig-pdf-preview.is-loaded .pig-pdf-status{display:none;}
.pig-pdf-preview.is-error .pig-pdf-status{display:flex;background:#fafafa;}
.pig-pdf-preview:not(.is-loaded):not(.is-error)::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f5f5f5 0%,#fafafa 46%,#f1f1f1 100%);animation:pigPreviewPulse 1.4s ease-in-out infinite;}
@keyframes pigPreviewPulse{0%,100%{opacity:.7}50%{opacity:1}}
.pig-resource-card p{font-size:14px;line-height:1.55;color:#666;margin:14px 0 16px;min-height:44px;}
.pig-pdf-actions,.pig-secondary-link{margin-top:auto;}
.pig-pdf-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pig-pdf-actions a,.pig-secondary-link,.pig-view-product{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:1px solid #111;background:#111;color:#fff!important;text-decoration:none!important;font-weight:800;font-size:13px;letter-spacing:.02em;}
.pig-pdf-actions a:first-child,.pig-secondary-link{background:#fff;color:#111!important;}
.pig-notes{margin-top:24px;padding:22px;border:1px solid #e6e6e6;background:#fff;}
.pig-notes p{margin:0;color:#555;line-height:1.7;}
.pig-view-product{margin-top:22px;width:100%;min-height:48px;}
.pig-view-product:hover,.pig-pdf-actions a:hover,.pig-secondary-link:hover{opacity:.86;}

/* ==================================================
   WooCommerce product Installation tab
   ================================================== */
.pig-product-installation-tab{max-width:1100px;margin:0 auto;padding:8px 0 12px;}
.pig-product-installation-head span{display:block;margin:0 0 8px;font-size:12px;line-height:1;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#777;}
.pig-product-installation-head h2{margin:0 0 20px;font-size:28px;line-height:1.25;font-weight:850;color:#111;}
.woocommerce div.product .woocommerce-tabs .panel .pig-product-installation-tab .pig-product-installation-head h2,
.woocommerce .woocommerce-tabs .panel .pig-product-installation-tab .pig-product-installation-head h2,
body.single-product .pig-product-installation-tab .pig-product-installation-head h2{margin-top:0!important;margin-bottom:20px!important;}
.pig-product-installation-video{position:relative;width:100%;max-width:760px;aspect-ratio:16/9;background:#f3f3f3;overflow:hidden;border:1px solid #e4e4e4;}
.pig-product-installation-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.pig-product-installation-copy{max-width:760px;margin:16px 0 18px;color:#555;font-size:15px;line-height:1.65;}
.pig-product-installation-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.pig-product-guide-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border:1px solid #111;background:#111;color:#fff!important;text-decoration:none!important;font-size:13px;font-weight:850;letter-spacing:.02em;transition:opacity .18s ease;}
.pig-product-guide-button:hover{opacity:.86;color:#fff!important;text-decoration:none!important;}
.pig-product-pdf-note{color:#666;font-size:13px;line-height:1.4;}

/* ==================================================
   1024px / 820px / 768px compact layout
   ================================================== */
@media(max-width:1024px){
  .pig-guide-list-wrap{padding:14px 18px 56px!important;max-width:none!important;}
  .pig-guide-filter{margin-bottom:26px!important;}
  .pig-search-wrap{margin-bottom:10px!important;border-radius:28px!important;}
  .pig-search-wrap input[type="search"],.pig-search-input{height:56px!important;min-height:56px!important;line-height:56px!important;border-radius:28px 0 0 28px!important;padding-left:22px!important;padding-right:16px!important;font-size:14px!important;}
  .pig-search-wrap button,.pig-search-wrap .pig-search-icon{flex:0 0 68px!important;width:68px!important;height:56px!important;min-height:56px!important;line-height:56px!important;border-radius:0 28px 28px 0!important;}
  .pig-search-wrap button svg,.pig-search-wrap .pig-search-icon svg{width:25px!important;height:25px!important;}

  .pig-popular{padding:0!important;margin:8px 0 18px!important;gap:7px!important;}
  .pig-popular-label{width:100%!important;font-size:12px!important;}
  .pig-hot-tag{font-size:12.5px!important;padding:7px 12px!important;}

  .pig-toolbar{margin:8px 0 26px!important;gap:14px!important;}
  .pig-result-bar{padding:0!important;min-height:0!important;}
  .pig-result-count{font-size:12.5px!important;}
  .pig-toolbar .pig-topic-filter{padding:0!important;margin:0!important;}
  .pig-toolbar .pig-category-wrap{width:190px!important;max-width:190px!important;}

  .pig-guide-card{grid-template-columns:1fr!important;gap:12px!important;}
  .pig-card-tags{justify-content:flex-start!important;max-width:none!important;gap:6px!important;}
  /* 768px-1024px keep all guide tags visible */
  .pig-card-tags .pig-tag-type,
  .pig-card-tags .pig-tag-category{display:inline-flex!important;}
  .pig-no-results{font-size:14px;padding:18px;}

  .pig-single-wrap{width:calc(100% - 32px);max-width:none;}
  .pig-single-template-main{padding:26px 0 40px;}
  .pig-single-hero{grid-template-columns:1fr!important;}
  .pig-product-image{width:130px!important;justify-self:start;}
  .pig-single-heading h1{font-size:26px!important;}
  .pig-resource-grid{grid-template-columns:1fr!important;}
  .pig-resource-card p{min-height:0;}
  .pig-pdf-actions{grid-template-columns:1fr;}

  .pig-product-installation-head h2{font-size:23px;}
  .pig-product-guide-button{width:100%;}
  .pig-product-pdf-note{width:100%;}
}


/* Mobile only: keep the compact two-tag display (Video / PDF only). */
@media(max-width:767px){
  .pig-card-tags .pig-tag-type,
  .pig-card-tags .pig-tag-category{display:none!important;}
}

@media(max-width:600px){
  .pig-pagination{gap:8px;margin-top:22px;}
  .pig-page-link{min-width:78px;}
  .pig-page-link,.pig-page-number{height:36px;min-width:36px;padding:0 10px;font-size:12px;}
}

@media(max-width:420px){
  .pig-guide-list-wrap{padding-left:16px!important;padding-right:16px!important;}
  .pig-search-wrap{border-radius:25px!important;}
  .pig-search-wrap input[type="search"],.pig-search-input{height:52px!important;min-height:52px!important;line-height:52px!important;border-radius:25px 0 0 25px!important;padding-left:18px!important;}
  .pig-search-wrap button,.pig-search-wrap .pig-search-icon{flex-basis:60px!important;width:60px!important;height:52px!important;min-height:52px!important;line-height:52px!important;border-radius:0 25px 25px 0!important;}
  .pig-search-wrap button svg,.pig-search-wrap .pig-search-icon svg{width:23px!important;height:23px!important;}
  .pig-toolbar{gap:10px!important;}
  .pig-toolbar .pig-category-wrap{width:170px!important;max-width:170px!important;}
  .pig-result-count{font-size:12px!important;}
}