/* =========================
   PAGE
========================= */

body{
  background:#f6f7fb;
  color:#111827;
}

/* =========================
   HEADER
========================= */

.search-header{
  position:sticky;
  top:0;
  z-index:100;

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(14px);

  border-bottom:1px solid #e5e7eb;

  padding:0px 30px;
}

.search-header-inner{
  max-width:1500px;
  margin:auto;
}

/* TOP ROW */

.header-top-row{
  display:flex;
  align-items:center;
  gap:24px;

  padding:14px 0 10px;
}

/* LOGO */

.logo{
  display:flex;
  align-items:center;
  margin-top:40px;

  height:58px;
}

.logo img{
  height:50px;

  width:auto;

  display:block;

  object-fit:contain;
}

.right-search{
  flex:1;
  max-width:720px;
}

/* =========================
   SEARCH INPUT
========================= */

.search-box{
  position:relative;
}

.search-box input{
  width:100%;
  height:58px;

  border:1px solid #dbe1ea;

  border-radius:16px;

  background:#fff;

  padding:0 70px 0 20px;

  font-size:15px;

  transition:.2s ease;
}

.search-box input:focus{
  outline:none;

  border-color:#2563eb;

  box-shadow:
    0 0 0 4px rgba(37,99,235,.08);
}

.search-icon{
  position:absolute;
  right:10px;
  top:50%;

  transform:translateY(-50%);

  width:40px;
  height:40px;

  border-radius:12px;

  background:#2563eb;

  display:flex;
  align-items:center;
  justify-content:center;
}

.search-icon img{
  width:16px;
  filter:brightness(0) invert(1);
}


/* =========================
   IMAGE PAGE
========================= */

.image-page{
  max-width:1500px;

  margin:0 auto 80px;

  padding:40px 24px 0;
}

.image-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    360px;

  gap:32px;

  align-items:start;
}

/* =========================
   LEFT
========================= */

.preview-card{
  background:#fff;

  border-radius:28px;

  padding:28px;

  border:1px solid #edf2f7;

  box-shadow:
    0 10px 30px rgba(15,23,42,.04);
}

/* PREVIEW */

.image-preview{
  min-height:700px;

  border-radius:22px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

/* CHECKER */

.checker-bg{
  background-image:
    linear-gradient(45deg,#f3f4f6 25%,transparent 25%),
    linear-gradient(-45deg,#f3f4f6 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f3f4f6 75%),
    linear-gradient(-45deg,transparent 75%,#f3f4f6 75%);

  background-size:28px 28px;

  background-position:
    0 0,
    0 14px,
    14px -14px,
    -14px 0;
}

/* IMAGE */

.image-preview img{
  max-width:100%;
  max-height:820px;

  object-fit:contain;
}

/* =========================
   RIGHT SIDEBAR
========================= */

.download-sidebar{
  position:sticky;
  top:110px;
}

.download-card{
  background:#fff;

  border-radius:28px;

  padding:28px;

  border:1px solid #edf2f7;

  box-shadow:
    0 10px 30px rgba(15,23,42,.04);
}

/* TITLE */

.image-title{
  font-size:42px;

  line-height:1.05;

  font-weight:800;

  letter-spacing:-2px;

  margin-bottom:20px;
}

/* MINI TAGS */

.mini-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-bottom:28px;
}

.mini-tags span{
  padding:8px 15px;

  border-radius:999px;

  background:#eef2f7;

  font-size:13px;

  color:#475569;
}

/* META */

.image-meta{
  margin-bottom:28px;
}

.meta-row{
  display:flex;
  justify-content:space-between;

  padding:14px 0;

  border-bottom:1px solid #f1f5f9;

  font-size:15px;
}

.meta-row span{
  color:#64748b;
}

/* DOWNLOAD BUTTON */

.download-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:100%;

  height:58px;

  border-radius:18px;

  background:#2563eb;

  color:#fff;

  text-decoration:none;

  font-weight:700;

  margin-bottom:14px;

  transition:.2s ease;
}

.download-btn:hover{
  transform:translateY(-2px);

  background:#1d4ed8;
}

.download-btn img{
  width:18px;

  filter:brightness(0) invert(1);
}

/* SAVE BUTTON */

.save-btn{
  width:100%;
  height:56px;

  border-radius:18px;

  border:1px solid #dbe1ea;

  background:#fff;

  font-weight:600;

  cursor:pointer;
}

/* TAGS */

.tags-card{
  background:#fff;

  border-radius:24px;

  padding:24px;

  margin-top:24px;

  border:1px solid #edf2f7;
}

.tags-card h3{
  margin-bottom:18px;

  font-size:24px;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.tags .tag-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 18px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f3f7ff 100%
    );

  border:1px solid #dbeafe;

  text-decoration:none;

  color:#2563eb;

  font-size:14px;
  font-weight:600;

  transition:.25s ease;

  box-shadow:
    0 4px 12px rgba(37,99,235,.06);
}

.tags .tag-link:hover{
  transform:translateY(-2px);

  background:#2563eb;

  color:#fff;

  border-color:#2563eb;

  box-shadow:
    0 10px 24px rgba(37,99,235,.18);
}

/* PREMIUM SEO SECTION */

.premium-seo{
  max-width:1500px;
  margin:0 auto 90px;
  padding:0 24px;
}

.premium-seo-inner{
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbff 100%
    );

  border:1px solid #edf2f7;

  border-radius:36px;

  padding:60px;

  box-shadow:
    0 20px 60px rgba(15,23,42,.05);
}

.seo-badge{
  display:inline-flex;

  padding:10px 18px;

  border-radius:999px;

  background:#2563eb;

  color:#fff;

  font-size:13px;
  font-weight:700;

  margin-bottom:24px;
}

.premium-seo h2{
  font-size:48px;

  line-height:1.1;

  font-weight:900;

  letter-spacing:-2px;

  margin-bottom:26px;

  max-width:900px;
}

.premium-seo p{
  max-width:950px;

  font-size:18px;

  line-height:1.9;

  color:#475569;

  margin-bottom:40px;
}

.seo-features{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:24px;
}

.seo-feature{
  background:#fff;

  border:1px solid #edf2f7;

  border-radius:24px;

  padding:28px;
}

.seo-feature strong{
  display:block;

  font-size:18px;

  margin-bottom:12px;
}

.seo-feature span{
  color:#64748b;

  line-height:1.7;
}

/* =========================
   RELATED
========================= */

.related-section{
  max-width:1500px;

  margin:auto;

  padding:0 24px 70px;
}

.related-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:28px;
}

.related-top h2{
  font-size:34px;

  font-weight:800;

  letter-spacing:-1px;
}

.view-all{
  text-decoration:none;

  color:#64748b;

  font-size:15px;
  font-weight:600;
}

.view-all:hover{
  color:#2563eb;
}

/* GRID */

.related-section .grid{
  display:grid;

  grid-template-columns:repeat(4, minmax(0, 280px));

  justify-content:center;

  gap:20px;
}

/* CARD */

.card{
  background:#fff;

  border-radius:22px;

  padding:14px;

  border:1px solid #edf2f7;

  transition:.25s ease;

  box-shadow:
    0 4px 20px rgba(15,23,42,.03);
}

.card:hover{
  transform:translateY(-6px);

  box-shadow:
    0 16px 40px rgba(15,23,42,.08);
}

/* CARD IMAGE */

.card-image{
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:18px;

  overflow:hidden;

  padding:14px;

  background-image:
    linear-gradient(45deg,#f3f4f6 25%,transparent 25%),
    linear-gradient(-45deg,#f3f4f6 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f3f4f6 75%),
    linear-gradient(-45deg,transparent 75%,#f3f4f6 75%);

  background-size:24px 24px;

  min-height:220px;
}
/* CARD IMG */

.card img{
  max-width:100%;
  max-height:320px;

  width:auto;
  height:auto;

  object-fit:contain;

  display:block;
}

.card-link{
  text-decoration:none;
  color:inherit;
  display:block;
}

/* TITLE */

.card-title{
  margin-top:14px;

  font-size:15px;

  text-align:center;

  line-height:1.5;
}

.card-title a{
  color:#111827;

  text-decoration:none;

  font-weight:600;
}

/* FOOTER */

.site-footer{
  margin-top:80px;

  background:#fff;

  border-top:1px solid #e5e7eb;
}

.footer-inner{
  max-width:1500px;

  margin:auto;

  padding:60px 24px;

  display:flex;
  justify-content:space-between;

  gap:60px;
}

.footer-brand img{
  height:42px;

  margin-bottom:18px;
}

.footer-brand p{
  max-width:320px;

  color:#64748b;

  line-height:1.7;
}

.footer-columns{
  display:flex;
  gap:70px;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-col h4{
  margin-bottom:10px;

  font-size:17px;
}

.footer-col a{
  text-decoration:none;

  color:#64748b;
}

.footer-col a:hover{
  color:#2563eb;
}

.footer-bottom{
  border-top:1px solid #f1f5f9;

  padding:22px;

  text-align:center;

  color:#94a3b8;

  font-size:14px;
}

/* MOBILE */

@media(max-width:1000px){

  .image-layout{
    grid-template-columns:1fr;
  }

  .download-sidebar{
    position:relative;
    top:auto;
  }

  .related-section .grid{
    grid-template-columns:repeat(2,1fr);
  }

  .image-preview{
    min-height:400px;
  }

  .image-title{
    font-size:30px;
  }
}

.more-wrapper{
  width:100%;

  display:flex;
  justify-content:center;

  margin:20px 0 70px;
}

/* =========================
   POPULAR SECTION
========================= */

.popular-section{
  max-width:1500px;

  margin:0 auto 80px;

  padding:0 24px;
}

.popular-section h2{
  font-size:34px;

  font-weight:800;

  margin-bottom:24px;

  letter-spacing:-1px;
}

/* LINKS */

.popular-links{
  display:flex;
  flex-wrap:wrap;

  gap:16px;
}

.popular-links a{
  padding:14px 22px;

  border-radius:18px;

  background:#fff;

  border:1px solid #edf2f7;

  text-decoration:none;

  color:#111827;

  font-weight:600;

  transition:.25s ease;

  box-shadow:
    0 4px 20px rgba(15,23,42,.03);
}

.popular-links a:hover{
  transform:translateY(-4px);

  border-color:#2563eb;

  color:#2563eb;

  box-shadow:
    0 16px 40px rgba(15,23,42,.08);
}

/* TOP CATEGORIES */

.top-categories{
  border-top:1px solid #f1f5f9;

  background:#fff;

  padding:12px 0;

  overflow:hidden;
}

/* TRACK */

.categories-track{
  display:flex;
  align-items:center;

  gap:14px;

  width:max-content;

  padding:0 24px;
}

/* CATEGORY */

.categories-track a{
  flex:none;

  text-decoration:none;

  padding:12px 20px;

  border-radius:999px;

  background:#fff;

  border:1px solid #e5e7eb;

  color:#475569;

  font-size:15px;
  font-weight:600;

  white-space:nowrap;

  transition:.25s ease;

  box-shadow:
    0 4px 20px rgba(15,23,42,.03);
}

.categories-track a:hover{
  background:#2563eb;

  border-color:#2563eb;

  color:#fff;

  transform:translateY(-2px);
}

/* HEADER SHOW / HIDE */

.search-header.show-header{
  transform:translateY(0);
}

.search-header{
  transition:transform .35s ease;
}

.search-header.hide-header{
  transform:translateY(-100%);
}

.dynamic-seo{
  max-width:1500px;

  margin:0 auto 80px;

  padding:0 24px;
}

.dynamic-seo-content{
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbff 100%
    );

  border:1px solid #edf2f7;

  border-radius:36px;

  padding:50px;

  box-shadow:
    0 20px 60px rgba(15,23,42,.05);
}

.seo-article h2{
  font-size:42px;

  line-height:1.1;

  font-weight:900;

  letter-spacing:-1.5px;

  margin-bottom:24px;
}

.seo-article h3{
  font-size:24px;

  margin-top:42px;
  margin-bottom:18px;

  font-weight:800;
}

.seo-article p{
  font-size:17px;

  line-height:1.9;

  color:#475569;
}

.keyword-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.keyword-cloud{
  font-weight:600;
}

.seo-table{
  width:100%;

  border-collapse:collapse;

  margin-top:20px;

  overflow:hidden;

  border-radius:18px;
}

.seo-table td{
  border:1px solid #edf2f7;

  padding:16px;

  font-size:15px;
}

.related-searches{
  display:flex;
  flex-wrap:wrap;

  gap:14px;

  margin-top:18px;
}

.related-searches a{
  padding:12px 18px;

  border-radius:999px;

  background:#eff6ff;

  color:#2563eb;

  text-decoration:none;

  font-weight:600;

  transition:.2s ease;
}

.related-searches a:hover{
  background:#2563eb;

  color:#fff;
}

.faq-box h4{
  font-size:18px;

  margin-top:28px;
  margin-bottom:10px;
}

.seo-article h2,
.seo-article h3 {
  margin-top: 25px;
  margin-bottom: 15px;
}

.seo-article p {
  line-height: 1.8;
  color: #555;
}

.seo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.seo-table td {
  border: 1px solid #eee;
  padding: 12px;
}

.related-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.related-searches a {
  padding: 8px 14px;
  background: #f5f5f5;
  border-radius: 999px;
  text-decoration: none;
  color: #222;
}

.faq-box h4 {
  margin-top: 20px;
}