/* File: style.css
 * Date: 2026-01-15 14:47
 * Ver.: 0.5
 * Description: aptofi theme styles (premium light tech). Stage 1 restore UI styles and fix grid preview posters.
 * Last change: Add right-only sidebar layout for inner pages (ap-page-grid + ap-sidebar styles). Keep everything else intact.
 */

/* ================= RESET ================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Comments privacy policy link must look like a link (underline + hover) */
.ap-privacy-text a.ap-privacy-link,
.ap-privacy-text a.ap-privacy-link:visited{
  color: var(--a1);
  text-decoration: underline;
  font-weight: 900;
}
.ap-privacy-text a.ap-privacy-link:hover{
  text-decoration: underline;
}

button,input,textarea,select{font:inherit}
button{background:none;border:none;cursor:pointer}
ul{list-style:none;margin:0;padding:0}

/* ================= DESIGN TOKENS ================= */
:root{
  --bg-card: rgba(255,255,255,.82);
  --bg-card-strong:#ffffff;
  --stroke: rgba(110,160,255,.55);
  --stroke-soft: rgba(120,160,255,.25);
  --shadow: 0 26px 70px rgba(14,25,55,.16);
  --shadow-soft: 0 18px 55px rgba(14,25,55,.12);
  --radius: 22px;

  --a1:#4f7cff;
  --a2:#ff5796;
  --a3:#00dcff;
  --a4:#8b5cff;

  --grid-gap: 22px;

  /* Smaller media to show more text */
  --card-media-h: 170px;
  --card-body-h: 138px;

  --card-h: calc(var(--card-media-h) + var(--card-body-h));

  --container: 1520px;
  --gutter: 28px;
  --header-top: 54px;
  --fixedhead: 118px; /* langbar + menubar total offset (tighter) */
}


/* ================= BODY BACKGROUND (SEAMLESS) ================= */
html{
  background-color:#f6f9ff;
}

body,
body.aptofi{
  font-family:'Inter',system-ui,sans-serif;
  color:#0c1326;
  overflow-x:hidden;
  background: transparent;
  position: relative;

  /* sticky footer */
  min-height:100vh;
  display:flex;
  flex-direction:column;

  /* ВАЖНО: отступ ПОСЛЕ футера даёт body::after (ниже). Тут не добавляем, иначе на коротких страницах будет "тройной" зазор */
  padding-bottom:0 !important;
}





/* Fixed seamless gradient layer (covers any page height with no seams) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background-color:#f6f9ff;
  background-image:
    radial-gradient(1200px 900px at 12% 10%, rgba(79,124,255,.24), transparent 62%),
    radial-gradient(1100px 900px at 86% 12%, rgba(255,87,150,.18), transparent 62%),
    radial-gradient(1100px 900px at 78% 88%, rgba(0,220,255,.14), transparent 62%),
    linear-gradient(180deg, #f6f9ff 0%, #f5f7fb 50%, #f6f9ff 100%);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
}

/* HARD FIX: always add 10px AFTER footer (pseudo-element is the last thing inside body) */
body::after{
  content:"";
  display:block;
  height:10px;
  flex:0 0 10px;
}



/* Background noise layer */
.bg-noise{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  z-index:0;
}

/* ================= LAYOUT HELPERS ================= */
main,
.ap-wrap{
  width:min(var(--container), calc(100% - var(--gutter)));
  margin: 0 auto 10px; /* 10px ПЕРЕД футером */
  position:relative;
  z-index:1;

  /* sticky footer: контент растягивает страницу */
  flex:1 0 auto;
}






.ap-container{width:100%}

/* ================= FIXED TOP HEADER (NO JUMP) ================= */
.ap-langbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1200;
}
.ap-menubar{
  position:fixed;
  left:0; right:0;
  top: var(--header-top);
  z-index:1100;
  margin:6px auto 0; /* было 12px -> стало вдвое меньше */
  width:min(var(--container), calc(100% - var(--gutter)));
}


body.aptofi main.ap-main,
body.aptofi main.wrap,
body.aptofi main.ap-wrap,
main.ap-main,
main.wrap,
main.ap-wrap{
  padding-top: var(--fixedhead);
}





/* ================= LANGUAGE BAR ================= */
.lang-bar,
.ap-langbar{
  padding:10px 14px;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  background: rgba(235,242,255,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(120,160,255,.22);
}
.ap-langbar-inner{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100%}

.lang-btn,
.ap-langbtn{
  border:1px solid rgba(110,160,255,.35);
  background: rgba(255,255,255,.78);
  padding:7px 11px;
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  color:#233055;
  transition:transform .25s, box-shadow .25s, border-color .25s, background .25s;
  box-shadow: 0 10px 18px rgba(10,20,40,.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  user-select:none;
}
.lang-btn:hover,
.ap-langbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(110,160,255,.7);
  box-shadow: 0 18px 30px rgba(79,124,255,.18);
}
.lang-btn.active,
.ap-langbtn.on{
  color:#fff;
  background: linear-gradient(135deg, var(--a1), var(--a4));
  border-color: transparent;
}

/* ================= HEADER ================= */
.header,
.ap-menubar{
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(12,22,40,.14);
  border: 1px solid rgba(120,160,255,.22);
}
.header{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.ap-menubar-inner{
  padding: 7px 8px;     /* было 14/16 -> вдвое меньше */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;              /* было 16 -> 8 */
}


.header-left,
.ap-left{
  display:flex;
  align-items:center;
  gap:6px;          /* было 12 -> 6 */
  min-width: 260px; /* было 520 -> 260 */
}

.header-right,
.ap-right{
  display:flex;
  align-items:center;
  gap:6px; /* было 12 -> 6 */
}

.brand,
.ap-brand{
  display:flex; align-items:center; gap:10px;
}
.brand-badge{
  width:40px; height:40px; border-radius:14px;
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(255,87,150,.85));
  box-shadow: 0 18px 40px rgba(79,124,255,.22);
  position:relative;
  flex:0 0 auto;
}
.brand-badge:after{
  content:"";
  position:absolute; inset:2px;
  border-radius:12px;
  background: radial-gradient(18px 18px at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  opacity:.8;
}
.brand-txt{line-height:1.1}
.brand-name,
.ap-brand-name{
  font-weight:900;
  letter-spacing:.2px;
  font-size:22px;   /* 2x */

  display:inline-flex;
  align-items:center;
  gap:5px;
  line-height:1;
}




.ap-brand-title{
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(255,87,150,.85), rgba(0,220,255,.75));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-sub{font-size:12px;color:#54648a;font-weight:600;margin-top:2px}

.ap-brand-logo{
  width:40px;        /* 2x */
  height:40px;       /* 2x */
  object-fit:contain;
  border-radius:14px; /* как было изначально */
  flex:0 0 auto;
}



/* Icon buttons */
.icon-btn{
  width:22px; height:22px;         /* было 44 -> 22 */
  border-radius: 7px;              /* было 14 -> 7 */
  border: 1px solid rgba(110,160,255,.55); /* было 2px -> 1px */
  background: rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  box-shadow: 0 6px 13px rgba(10,20,40,.08); /* было 12/26 -> вдвое меньше */
  user-select:none;
  font-size:12px;                  /* чтобы символы не выглядели огромными */
  line-height:1;
}

.icon-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(110,160,255,.95);
  box-shadow: 0 18px 36px rgba(79,124,255,.22);
}

/* Search (restore focus outline and border) */
.search{
  flex: 1;
  display:flex;
  align-items:center;
  border-radius: 8px;                 /* было 16 -> 8 */
  border: 1px solid rgba(110,160,255,.4); /* было 2px -> 1px */
  background: rgba(255,255,255,.82);
  overflow:hidden;
  min-width: 110px;                   /* было 220 -> 110 */
  box-shadow: 0 7px 15px rgba(10,20,40,.08); /* было 14/30 -> вдвое меньше */
  transition: box-shadow .2s, border-color .2s, transform .2s;
}

.search:focus-within{
  border-color: rgba(110,160,255,.95);
  box-shadow: 0 18px 42px rgba(79,124,255,.22);
  transform: translateY(-1px);
}
.search input{
  flex:1;
  border:none;
  outline:none;
  padding: 6px 6px;   /* было 11/12 -> ~вдвое меньше */
  font-size:12px;     /* аккуратнее, иначе слишком мелко */
  background: transparent;
}

.search button{
  border:none;
  background: transparent;     /* УБРАЛИ синюю подложку */
  color:#243154;               /* цвет иконки */
  padding: 0 10px;
  height: 22px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  border-left: 1px solid rgba(110,160,255,.25);
}
.search button:hover{
  background: rgba(79,124,255,.10);
}



/* Menu trigger + burger lines restored */
.menu-trigger,
.ap-burger{
  display:flex;
  align-items:center;
  gap:5px;
  padding: 6px 7px;
  border-radius: 8px;
  border: 1px solid rgba(110,160,255,.5);
  background: rgba(255,255,255,.78);
  cursor:pointer;
  font-weight:800;
  box-shadow: 0 6px 13px rgba(10,20,40,.08);
  transition:transform .25s, box-shadow .25s, border-color .25s, background .25s;
  user-select:none;
  font-size:12px;
  line-height:1;
  position:relative;
  z-index:1255;
}

.menu-trigger:hover,
.ap-burger:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(79,124,255,.18);
  border-color: rgba(110,160,255,.95);
}

.ap-burger[aria-expanded="true"]{
  border-color: rgba(110,160,255,.95);
  box-shadow: 0 18px 42px rgba(79,124,255,.20);
  background: rgba(255,255,255,.86);
}

.ap-burger-ico{
  position:relative;
  width:11px;
  height:7px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
  flex:0 0 auto;
}
.ap-burger-ico span{
  display:block;
  height:1px;
  border-radius:99px;
  background:#243154;
  box-shadow: 0 0 0 1px rgba(120,160,255,.18);
}

.ap-burger:hover .ap-burger-ico span,
.menu-trigger:hover .ap-burger-ico span{
  background:#0c1326;
}

.ap-menubar{
  position:fixed;
}

.ap-menubar > .ap-burger-menu{
  position:absolute !important;
  top: calc(100% + 10px) !important;
  right: 8px !important;
  left: auto !important;
  width: 260px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(120,160,255,.22);
  box-shadow: 0 18px 55px rgba(14,25,55,.12);
  z-index:1245;
}

.ap-menubar > .ap-burger-menu[hidden]{
  display:none !important;
}

.ap-menubar > .ap-burger-menu .ap-burger-menu-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ap-menubar > .ap-burger-menu .ap-burger-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(110,160,255,.18);
  font-weight:900;
  color:#243154;
  line-height:1.1;
  box-shadow: 0 10px 20px rgba(10,20,40,.06);
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
  white-space:nowrap;
}

.ap-menubar > .ap-burger-menu .ap-burger-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(79,124,255,.16);
  border-color: rgba(110,160,255,.55);
  background: rgba(255,255,255,.78);
}

.ap-menubar > .ap-burger-menu .ap-burger-item:after{
  content:"→";
  font-weight:900;
  opacity:.7;
}

.ap-burger-open .ap-menubar > .ap-burger-menu{
  animation: ap_bm_in .14s ease-out both;
}

@keyframes ap_bm_in{
  from{ opacity:0; transform: translateY(-4px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px){
  .ap-menubar > .ap-burger-menu{
    right: 6px !important;
    top: calc(100% + 8px) !important;
    width: 240px;
    max-width: calc(100vw - 24px);
  }
}



/* ================= SECTION HEADER ================= */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 12px;
  margin: 10px 0 18px;
}

.h-title{font-size:30px;font-weight:900;letter-spacing:-0.6px}
.h-sub{font-size:14px;color:#5a6c93;font-weight:600;margin-top:6px}
.h-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}

.pill{
  border: 1px solid rgba(110,160,255,.35);
  background: rgba(255,255,255,.78);
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 900;
  color:#243154;
  box-shadow: 0 12px 28px rgba(10,20,40,.08);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(79,124,255,.18);
  border-color: rgba(110,160,255,.85);
}

/* ================= HERO GRID ================= */
.hero{display:grid; grid-template-columns: 420px 1fr; gap:28px; align-items:start; margin-top:18px}

/* ================= FIXED BOXES ================= */
.fixed-box{
  /* default height (as it was) */
  --ap-fixedbox-h: calc(var(--card-h) * 2 + var(--grid-gap));
  height: var(--ap-fixedbox-h);

  border-radius: var(--radius);
  background:
    radial-gradient(130px 130px at 30% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  border: 1px solid rgba(120,160,255,.22);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}



.fixed-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.fixed-box:before{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--radius);
  padding: 2px;
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(255,87,150,.75), rgba(0,220,255,.75), rgba(139,92,255,.8));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ap_borderFlow 4s linear infinite;
  opacity:.9;
}
@keyframes ap_borderFlow{
  0%{filter:hue-rotate(0deg)}
  100%{filter:hue-rotate(360deg)}
}
.fixed-box-inner{
  position:absolute; inset:16px;
  border-radius: calc(var(--radius) - 10px);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border: 1px solid rgba(110,160,255,.18);
}
.fixed-kicker{display:flex; align-items:center; justify-content:space-between; gap:10px}
.badge{
  font-size:12px;
  font-weight:900;
  color:#fff;
  padding: 7px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--a1), var(--a4));
  box-shadow: 0 16px 35px rgba(79,124,255,.22);
}
.chip{
  font-size:12px;
  font-weight:900;
  color:#2a3a60;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(110,160,255,.28);
  background: rgba(255,255,255,.72);
}
.fixed-title{font-size:18px;font-weight:900;letter-spacing:-.3px}
.fixed-desc{color:#5a6c93;font-size:14px;line-height:1.55}
.fixed-cta-row{
  margin-top:auto;
  display:flex; gap:10px; flex-wrap:wrap;
}
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 900;
  cursor:pointer;
  border: 1px solid rgba(110,160,255,.32);
  background: rgba(255,255,255,.78);
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 14px 30px rgba(10,20,40,.10);
}
.cta.primary{
  border:none;
  color:#fff;
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(255,87,150,.85));
}
.cta:hover{transform: translateY(-2px); box-shadow: 0 22px 50px rgba(79,124,255,.20)}

/* ================= CARDS GRID ================= */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}
.card{
  height: var(--card-h);
  border-radius: var(--radius);
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(120,160,255,.20);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
}
.card:after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(220px 140px at 20% 0%, rgba(79,124,255,.22), transparent 65%),
              radial-gradient(240px 150px at 90% 10%, rgba(255,87,150,.18), transparent 60%);
  opacity:0;
  transition:.25s;
  pointer-events:none;
}
.card:hover:after{opacity:1}
.card:hover{
  box-shadow: 0 26px 70px rgba(14,25,55,.18);
  border-color: rgba(110,160,255,.55);
}

.card-link{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius: var(--radius);
}

.media,
.card-body,
.media-pill{position:relative; z-index:3}

.media{
  height: var(--card-media-h);
  position:relative;
  overflow:hidden;

  /* если постер/картинка задан(а) как background-image */
  background: rgba(255,255,255,.35);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.media img{
  width:100%;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform: scale(1.02);
  transition: transform .5s ease;
  border-radius: 16px;
}

/* Featured/Pinned block: internal wrapper must fill the media height, иначе будет "пустота" сверху */
.media.ap-featured-media > div{
  height:100%;
}

/* страховка именно для закреплённого блока */
.media.ap-featured-media img{
  width:100%;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
}


/* на случай если постер задан фоном не на .media, а на вложенном элементе */
.media .ap-card-poster[style*="background-image"],
.media [style*="background-image"]{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}


.card:hover .media img{transform: scale(1.08)}

.ap-card-poster{
  width:100%;
  height:100%;
  display:block;

  /* если это <img> */
  object-fit:cover;
  object-position:center center;

  /* если это <div style="background-image:..."> */
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}



.media-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,19,38,0) 0%, rgba(12,19,38,.50) 100%);
  pointer-events:none;
}

/* inline background-image тоже центрируем */
.media[style*="background-image"]{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.media-pill{
  position:absolute;
  top: 12px; left: 12px;
  display:inline-flex; align-items:center; gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color:#fff;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  z-index:7;
}
.dot{
  width:8px; height:8px; border-radius:99px;
  background: linear-gradient(135deg, var(--a3), var(--a2));
}

.card-body{
  height: var(--card-body-h);
  padding: 14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.card-title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.4px;
  transition: transform .2s ease;
}
.card:hover .card-title{transform: scale(1.05)}
.card-text{
  font-size: 14px;
  color:#5a6c93;
  line-height: 1.5;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}

.read-more{
  display:inline-flex; align-items:center; gap:8px;
  font-weight: 900;
  color: var(--a1);
  cursor:pointer;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(110,160,255,.25);
  background: rgba(255,255,255,.68);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position:relative;
  z-index:8;
}
.read-more:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(79,124,255,.20);
  border-color: rgba(110,160,255,.65);
}
.meta{font-size:12px;font-weight:800;color:#6a7aa3}

/* ================= BLOG + SERVICE TWO-COL ================= */
.two-col{display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:start}

/* ================= CUSTOM BLOCK (inner pages wrapper) ================= */
.custom-block{
  border-radius: var(--radius);
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(120,160,255,.20);
  box-shadow: var(--shadow-soft);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.custom-inner{position:relative}

/* ================= BREADCRUMBS ================= */
.ap-breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin: 4px 0 8px; /* меньше пустоты сверху */
  font-weight:900;
  color:#243154;
  font-size:12px;
}


.ap-breadcrumbs a{
  color:#243154;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(110,160,255,.22);
  padding:4px 8px;
  border-radius:999px;
}
.ap-breadcrumbs a:hover{
  border-color: rgba(110,160,255,.55);
}
.ap-bc-current{
  color:#243154;
  background:#fff;
  border:1px solid rgba(110,160,255,.55);
  padding:4px 10px;
  border-radius:999px;
  font-weight:900;
}
.ap-bc-sep{
  color:#6a7aa3;
  font-weight:900;
  font-size:12px;
}

/* ================= BASIC CONTENT TYPOGRAPHY ================= */
.ap-content{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(120,160,255,.22);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 12px;
  max-width:100%;
  overflow:hidden;
}
.ap-content *{max-width:100%}
.ap-content h1{font-size:22px;letter-spacing:-.3px;margin: 4px 0 8px;font-weight:900}
.ap-content h2{font-size:18px;letter-spacing:-.2px;margin: 12px 0 8px;font-weight:900}
.ap-content p{color:#233055;line-height:1.6;font-weight:600;margin: 8px 0;font-size:13px}
.ap-content a{color: var(--a1); font-weight:900}
.ap-content a:hover{text-decoration:underline}

/* Page head (title + date in one line, both in white pills) */
.ap-page-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 6px 0 12px;
}

.ap-page-title-pill{
  font-size:15px; 
  font-weight:900;
  letter-spacing:-.25px;
  line-height:1;
  background:#fff;
  border:1px solid rgba(110,160,255,.55);
  padding:6px 14px;
  border-radius:999px;
}

.ap-page-date-pill{
  font-size:10px;
  font-weight:900;
  color:#193a94;

  background:#fff;
  border:1px solid rgba(110,160,255,.55);
  padding:4px 10px;
  border-radius:999px;

  display:inline-flex;
  align-items:center;
  line-height:1;
  vertical-align:middle;
}



/* keep old classes (may be used elsewhere) */
.ap-page-title,
.page-title,
.ap-title,
h1.ap-title{
  font-size:15px;
  letter-spacing:-.25px;
  margin: 6px 0 6px;
  font-weight:900;
}
.ap-page-date,
.page-date,
.ap-date,
.ap-meta-date,
.ap-meta-time,
.time{
  font-size:8px;
  font-weight:900;
  color:#6a7aa3;
}

/* ================= INNER PAGES: RIGHT-ONLY SIDEBAR ================= */
/* IMPORTANT: page.php currently outputs left + right; we do NOT delete markup here.
   We hide left sidebar safely in CSS, and build 2-column layout (content + right sidebar). */

.ap-page-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr); /* по умолчанию БЕЗ сайдбара */
  gap: 22px;
  align-items:start;
}

/* Сайдбар включаем ТОЛЬКО когда page.php добавил класс ap-has-right */
.ap-page-grid.ap-has-right{
  grid-template-columns: minmax(0,1fr) 360px;
}

/* ТЗ: сайдбар только справа */
.ap-sidebar-left{
  display:none !important;
}


/* Main center */
.ap-page-center{
  min-width:0;
}

/* Sidebar base */
.ap-sidebar{
  min-width:0;
}

/* Right sidebar visible */
.ap-sidebar-right{
  display:block;
}

/* Sidebar stack and boxes (theme-like cards) */
.ap-sidebar-stack{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.ap-sb-box{
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(120,160,255,.20);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  position:relative;
  overflow:hidden;
}

.ap-sb-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:-.15px;
  color:#243154;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.ap-sb-title:before{
  content:"";
  width:10px;
  height:10px;
  border-radius:99px;
  background: linear-gradient(135deg, var(--a3), var(--a2));
  box-shadow: 0 10px 18px rgba(79,124,255,.16);
}

/* Sidebar items */
.ap-sb-item{
  display:block;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(110,160,255,.18);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  margin-top:10px;
}
.ap-sb-item:first-of-type{margin-top:0}
.ap-sb-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(79,124,255,.16);
  border-color: rgba(110,160,255,.55);
}

.ap-sb-item-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:-.15px;
  color:#0c1326;
  line-height:1.25;
}

.ap-sb-item-meta{
  margin-top:6px;
  font-size:11px;
  font-weight:800;
  color:#6a7aa3;
}

/* If widget outputs raw HTML, keep it inside card */
.ap-sb-box img{max-width:100%;height:auto;border-radius:16px}
.ap-sb-box a{color: var(--a1); font-weight:900}
.ap-sb-box a:hover{text-decoration:underline}

/* Responsive: sidebar goes under content */
@media (max-width: 1200px){
  .ap-page-grid{
    grid-template-columns: 1fr;
  }
  .ap-sidebar-right{
    margin-top: 14px;
  }
}

/* On very small screens: tighter paddings for sidebar boxes */
@media (max-width: 760px){
  .ap-sb-box{
    padding: 12px;
  }
  .ap-sb-item{
    padding: 10px 10px;
    border-radius: 14px;
  }
}

/* ================= SEARCH PAGE (search.php) ================= */
/* search.php использует свои классы wrap/layout/center/aside — приводим к сетке темы:
   только контент + ПРАВЫЙ сайдбар, левый скрываем */
body.aptofi main.wrap.ap-search-page .layout{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) 360px !important;
  gap: 22px;
  align-items:start;
}

/* показываем только правый сайдбар (последний aside) */
body.aptofi main.wrap.ap-search-page .layout > aside:not(:last-child){
  display:none !important;
}
body.aptofi main.wrap.ap-search-page .layout > aside:last-child{
  display:block !important;
  min-width:0;
}
body.aptofi main.wrap.ap-search-page .layout > .center{
  min-width:0;
}


/* ТЗ: только один сайдбар — правый */
body.aptofi main.wrap .layout > aside:first-child{
  display:none !important;
}

/* Центр и правый сайдбар не должны ломать ширину */
body.aptofi main.wrap .layout > .center{min-width:0}
body.aptofi main.wrap .layout > aside:last-child{min-width:0}

/* Адаптив: сайдбар вниз */
@media (max-width: 1200px){
  body.aptofi main.wrap .layout{
    grid-template-columns: 1fr;
  }
  body.aptofi main.wrap .layout > aside:last-child{
    margin-top: 14px;
  }
}

/* ================= MEDIA ROUNDING + PLAYERS VISIBILITY (CSS ONLY) ================= */

/* Ensure rounded corners everywhere for media blocks */
figure,
.ap-media,
.ap-figure,
.ap-preview-media,
.ap-video,
.ap-gif,
.ap-player,
.ap-content figure{
  border-radius: var(--radius);
}
figure,
.ap-media,
.ap-figure,
.ap-preview-media,
.ap-video,
.ap-gif,
.ap-player,
.ap-content figure{
  overflow:hidden;
}

/* Images / posters / videos inside content should be rounded */
.ap-content img,
.ap-content video,
.ap-content iframe,
.ap-content .ap-card-poster,
.ap-content .ap-preview-media img,
.ap-content .ap-preview-media video,
.ap-content figure img,
.ap-content figure video{
  border-radius: var(--radius);
}

/* Common GIF/video player wrappers (do not depend on exact markup) */
.ap-gif-wrap,
.ap-video-wrap,
.ap-player-wrap,
.ap-media-wrap,
.ap-gif-player,
.ap-video-player,
.ap-video-stage{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
}

.ap-gif-player img{width:100%;height:auto;display:block}
.ap-video-el{width:100%;height:auto;display:block}

/* Poster layer for video stage */
.ap-video-poster{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:10;
}

/* Play button overlay — supports several possible class names (ADD .ap-play-btn used in page.php) */
.ap-gif-btn,
.ap-gif-toggle,
.ap-gif-play,
.ap-play-btn,
.ap-video-btn,
.ap-video-play,
.ap-media-play,
.ap-player-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.78);
  border: 2px solid rgba(110,160,255,.55);
  box-shadow: 0 18px 40px rgba(10,20,40,.20);
  z-index:50;
}
.ap-gif-btn:hover,
.ap-gif-toggle:hover,
.ap-gif-play:hover,
.ap-play-btn:hover,
.ap-video-btn:hover,
.ap-video-play:hover,
.ap-media-play:hover,
.ap-player-btn:hover{
  border-color: rgba(110,160,255,.95);
  box-shadow: 0 24px 55px rgba(79,124,255,.28);
}
.ap-gif-btn:before,
.ap-gif-toggle:before,
.ap-gif-play:before,
.ap-play-btn:before,
.ap-video-btn:before,
.ap-video-play:before,
.ap-media-play:before,
.ap-player-btn:before{
  content:"▶";
  font-size:18px;
  font-weight:900;
  color:#243154;
  margin-left:2px;
}

/* If page.php marks "playing" state with a class — hide overlay */
.is-playing .ap-gif-btn,
.is-playing .ap-gif-toggle,
.is-playing .ap-gif-play,
.is-playing .ap-play-btn,
.is-playing .ap-video-btn,
.is-playing .ap-video-play,
.is-playing .ap-media-play,
.is-playing .ap-player-btn,
.playing .ap-gif-btn,
.playing .ap-gif-toggle,
.playing .ap-gif-play,
.playing .ap-play-btn,
.playing .ap-video-btn,
.playing .ap-video-play,
.playing .ap-media-play,
.playing .ap-player-btn{
  opacity:0;
  pointer-events:none;
}

/* ================= VIDEO PLAYER INTEGRITY FIX (ap-video-player + page-media.js) ================= */
/* Keeps controls in one piece, overlayed at bottom of the video (not falling below). */

.ap-video-player{
  position:relative;
  display:block;
  max-width:100%;
}

/* Ensure stage is stable BEFORE video metadata (prevents initial collapse) */
.ap-video-stage{
  position:relative;
  width:100%;
  background:#000;

  /* keep player size stable while JS assigns src + metadata loads */
  aspect-ratio:16/9;
  min-height:240px;
  overflow:hidden;
}

/* Make the <video> always fill stage (no "shrink then grow") */
.ap-video-el{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
  display:block;

  background:#000;
  object-fit:contain;
}

/* Controls: overlay at bottom (like normal players) */
.ap-video-controls{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:90;

  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 12px;
  border-radius:14px;

  background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
}

/* JS uses this class on fullscreen inactivity */
.ap-video-player.ap-ui-hide .ap-video-controls{
  opacity:0;
  pointer-events:none;
}

/* Buttons in controls */
.ap-video-controls .ap-ctl{
  width:36px;
  height:36px;
  border-radius:10px;

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

  color:#fff;
  font-size:16px;
  line-height:1;

  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.ap-video-controls .ap-ctl:hover{
  background:rgba(255,255,255,.18);
}

/* Progress row: keep seek in one line */
.ap-video-controls .ap-progress{
  flex:1;
  display:flex;
  align-items:center;
  min-width:80px;
}
.ap-video-controls .ap-range.ap-seek{
  width:100%;
  margin:0;
  background:transparent;
}

/* Volume bars (steps) — vertical increasing bars, same height zone as mute/gear */
.ap-video-controls .ap-vol{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;

  height:36px;          /* same as buttons */
  padding:6px 6px;      /* lift bars up a bit inside controls */
}

.ap-video-controls .ap-vol-step{
  width:4px;
  height:10px;          /* default for safety */
  border-radius:2px;
  background:rgba(255,255,255,.25);
  cursor:pointer;
  transition:height .15s, background .15s, transform .15s;
}

.ap-video-controls .ap-vol-step:hover{
  background:rgba(255,255,255,.45);
  transform:translateY(-1px);
}

.ap-video-controls .ap-vol-step.on{
  background:rgba(255,255,255,.92);
}

/* Increasing bar heights (supports 5–10 steps, extra steps still look OK) */
.ap-video-controls .ap-vol-step:nth-child(1){height:8px}
.ap-video-controls .ap-vol-step:nth-child(2){height:12px}
.ap-video-controls .ap-vol-step:nth-child(3){height:16px}
.ap-video-controls .ap-vol-step:nth-child(4){height:20px}
.ap-video-controls .ap-vol-step:nth-child(5){height:24px}
.ap-video-controls .ap-vol-step:nth-child(6){height:28px}
.ap-video-controls .ap-vol-step:nth-child(7){height:30px}
.ap-video-controls .ap-vol-step:nth-child(8){height:32px}
.ap-video-controls .ap-vol-step:nth-child(9){height:34px}
.ap-video-controls .ap-vol-step:nth-child(10){height:36px}

/* Quality dropdown */
.ap-q-wrap{
  position:relative;
}
.ap-q{
  position:absolute;
  right:0;
  bottom:44px;
  min-width:64px;
  padding:8px;
  border-radius:12px;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.18);
  display:none;
}
.ap-q.open{display:block;}
.ap-q-item{
  display:block;
  padding:6px 10px;
  border-radius:10px;
  color:#fff;
  font-weight:800;
  text-decoration:none;
}
.ap-q-item.on{
  background:rgba(255,255,255,.18);
}

/* On very small screens: tighten */
@media (max-width: 760px){
  .ap-video-controls{
    left:10px;
    right:10px;
    bottom:10px;
    gap:8px;
    padding:9px 10px;
  }
  .ap-video-controls .ap-ctl{
    width:34px;
    height:34px;
  }
  .ap-video-controls .ap-vol{
    height:34px;
  }
}

/* ================= DIVIDERS ================= */
.divider{
  margin: 24px 0 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,160,255,.45), transparent);
}

/* ================= FOOTER (restore look even if markup is simple) ================= */
footer,
.site-footer,
.ap-footer{
  width:min(var(--container), calc(100% - var(--gutter)));
  margin: 0 auto 0 !important; /* не даём никому вернуть 0/10px по-своему */
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(120,160,255,.22);
  box-shadow: 0 18px 55px rgba(14,25,55,.10);
  padding: 18px 18px;

  position:relative;
  z-index:1;

  /* sticky footer */
  margin-top:auto;
  flex-shrink:0;
}







footer a,
.site-footer a,
.ap-footer a{
  font-weight:900;
  color:#243154;
}
footer ul,
.site-footer ul,
.ap-footer ul{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px 14px;
}
footer li,
.site-footer li,
.ap-footer li{
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(110,160,255,.18);
}
footer li:hover,
.site-footer li:hover,
.ap-footer li:hover{
  border-color: rgba(110,160,255,.55);
}

/* Footer widget title (e.g. "Menu") — highlighted pill like sidebar title */
.footer-title{
  display:inline-flex;
  align-items:center;
  gap:8px;

  font-size:13px;
  font-weight:900;
  letter-spacing:-.15px;
  color:#243154;

  background:#fff;
  border:1px solid rgba(110,160,255,.55);
  padding:6px 14px;
  border-radius:999px;

  box-shadow: 0 10px 20px rgba(10,20,40,.06);
  margin: 0 0 10px;
}
.footer-title:before{
  content:"";
  width:10px;
  height:10px;
  border-radius:99px;
  background: linear-gradient(135deg, var(--a3), var(--a2));
  box-shadow: 0 10px 18px rgba(79,124,255,.16);
}


/* ================= RESPONSIVE ================= */
@media (max-width: 1200px){
  .hero{grid-template-columns: 1fr}
  .two-col{grid-template-columns: 1fr}
  .header-left{min-width:auto}
  body.aptofi main.ap-main{padding-top: calc(var(--header-top) + 55px)} /* было 110 -> 55 */
}

@media (max-width: 760px){
  :root{
    --card-media-h: 160px;
    --card-body-h: 150px;

    --gutter: 24px;

    /* MOBILE: langbar becomes 1-row scrollable, so header-top must be small/stable */
    --header-top: 64px;

    /* fixedhead = langbar (64) + menubar block (~56..64) + margins */
    --fixedhead: 132px;
  }

  /* Language bar: 1-row horizontal scroll (no wrap => no huge height => no overlap) */
  .ap-langbar,
  .lang-bar{
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .ap-langbar-inner{
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: max-content !important;
    min-width: 100% !important;
  }
  .ap-langbar::-webkit-scrollbar{height:0}

  .lang-btn,
  .ap-langbtn{
    padding: 7px 10px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  .cards-grid{grid-template-columns: 1fr}
  .fixed-box{height: calc(var(--card-h) * 2 + var(--grid-gap))}

  .header{padding: 12px}
  .search{display:none}

  .header-left,
  .ap-left{
    min-width:0 !important;
    flex:1 1 auto;
  }
  .header-right,
  .ap-right{
    flex:0 0 auto;
  }

  .ap-menubar{
    top: var(--header-top) !important;
    width: calc(100% - var(--gutter)) !important;
    left: 0;
    right: 0;
    margin: 6px auto 0 !important;
  }

  main,
  .ap-wrap{
    width: calc(100% - var(--gutter)) !important;
    max-width: calc(100% - var(--gutter)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .ap-page-grid,
  .ap-page-grid.ap-has-right{
    grid-template-columns: minmax(0,1fr) !important;
  }

  body.aptofi main.wrap .layout,
  .layout{
    grid-template-columns: minmax(0,1fr) !important;
  }

  footer ul,
  .site-footer ul,
  .ap-footer ul{grid-template-columns: 1fr}

  .ap-page-title,
  .page-title,
  .ap-title,
  h1.ap-title{
    font-size:22px;
  }
}



/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce){
  .card, .pill, .cta, .lang-btn, .menu-trigger, .icon-btn{
    transition:none !important;
  }
  .fixed-box:before{animation:none !important}
}

.ap-brand-slogan{
  font-size:20px;  /* 2x */
  font-weight:700;
  margin-left:0;
  opacity:.80;
  display:inline-flex;
  align-items:center;
  line-height:1;
}




.ap-brand-sep{
  font-size:4px;  /* было 8 -> 4 */
  font-weight:900;
  opacity:.65;
  display:inline-flex;
  align-items:center;
  line-height:1;
}


/* Gradient for first 2 letters of each word */
.ap-grad{
  background: linear-gradient(135deg, var(--a1), var(--a2), var(--a3), var(--a4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight:900;
}

.ap-w{
  display:inline-flex;
  align-items:center;
  line-height:1;
}

/* ================= SEARCH PAGE (search.php) ================= */

/* search.php uses <main class="wrap ap-search-page"> and generic .layout/.center/.pad/.btn.
   Theme pages use main.ap-main — so we style search page explicitly. */

body.aptofi main.wrap,
body.aptofi main.ap-wrap,
main,
.ap-wrap{
  width:min(var(--container), calc(100% - var(--gutter)));
  margin: 0 auto 10px; 
  position:relative;
  z-index:1;
  flex:1 0 auto;
}



/* Keep content below fixed langbar+menubar */
body.aptofi main.wrap,
main.wrap{
  padding-top: var(--fixedhead);
}

/* Search page: add extra spacing below header like other inner pages */
body.aptofi main.wrap.ap-search-page,
main.wrap.ap-search-page{
  padding-top: calc(var(--fixedhead) + 18px);
}


/* search.php */
.layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: var(--grid-gap);
  align-items:start;

  /* FIX: одинаковый отступ от фиксированной шапки до контента/сайдбара как на внутренних страницах */
  margin-top: 18px;
}

.center{min-width:0}
.layout > aside{min-width:0}

/* FIX: на всякий случай принудительно показываем правый aside (его могли скрыть другие правила/тема) */
.layout > aside:last-child{
  display:block !important;
  grid-column:2;
}

/* показываем только правый сайдбар (последний aside) */
.layout > aside:not(:last-child){
  display:none !important;
}

/* гарантируем раскладку: контент слева, правый сайдбар справа */
.layout > .center{grid-column:1}






/* Make "card" usable as content container on search page (theme card grid has fixed height) */
.ap-search-page .card{
  height:auto;
  min-height:unset;
}
.ap-search-page .card:hover{
  transform:none;
}

/* Padding helper used inside search.php */
.pad{padding:18px}

/* Search header text blocks (search.php uses 404-like classes) */
.errCat{
  font-size:22px;
  line-height:1;
  margin-bottom:10px;
  opacity:.85;
}
.errTitle{
  font-size:26px;
  font-weight:900;
  letter-spacing:-.35px;
  margin:0 0 6px 0;
}
.errText{
  color:#5a6c93;
  font-size:14px;
  font-weight:700;
  line-height:1.55;
  margin:0 0 14px 0;
}

/* Muted helper used in search.php */
.ap-muted{
  color:#5a6c93;
  font-weight:800;
  font-size:13px;
  line-height:1.55;
}

/* Buttons used by search.php */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 11px 14px;
  border-radius: 16px;

  font-weight:900;
  cursor:pointer;

  border: 1px solid rgba(110,160,255,.32);
  background: rgba(255,255,255,.78);

  box-shadow: 0 14px 30px rgba(10,20,40,.10);
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
  user-select:none;

  color:#243154;
  line-height:1;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(79,124,255,.18);
  border-color: rgba(110,160,255,.65);
}
.btn.primary{
  border:none;
  color:#fff;
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(255,87,150,.85));
}
.btn.primary:hover{
  box-shadow: 0 26px 70px rgba(79,124,255,.22);
}

/* Search form container */
.searchBox{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

  padding:12px 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(120,160,255,.22);
  box-shadow: var(--shadow-soft);
}

/* Make icons align nicely */
.searchBox span[aria-hidden="true"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:16px;
  opacity:.9;
}

/* Search input styling */
.searchBox input[type="search"]{
  flex:1;
  min-width: 220px;

  border-radius: 14px;
  border: 1px solid rgba(110,160,255,.35);
  background: rgba(255,255,255,.86);

  padding: 10px 12px;
  font-size: 13px;
  font-weight:800;

  outline:none;
  box-shadow: 0 10px 18px rgba(10,20,40,.06);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.searchBox:focus-within input[type="search"]{
  border-color: rgba(110,160,255,.95);
  box-shadow: 0 18px 42px rgba(79,124,255,.18);
  transform: translateY(-1px);
}

/* Paw search variant spacing (search.php adds pawSearch + absolute paw icon) */
.searchBox.pawSearch{
  position:relative;
}
.searchBox.pawSearch input[type="search"]{
  padding-left: 54px; /* space for paw icon */
}

/* Search results list (if inline styles exist, this keeps them in theme look) */
.ap-search-list{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ap-search-item{
  padding:14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(120,160,255,.22);
  box-shadow: var(--shadow-soft);
}
.ap-search-item .t{
  font-weight:900;
  font-size:18px;
  letter-spacing:-.25px;
  line-height:1.2;
}
.ap-search-item .t a{
  display:inline-block;
}
.ap-search-item .m{
  opacity:.75;
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  color:#6a7aa3;
}
.ap-search-item .d{
  opacity:.85;
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  color:#233055;
  line-height:1.55;
}

/* Responsive: sidebars go below content */
@media (max-width: 1200px){
  .layout{
    grid-template-columns: 1fr;
  }
  .layout > aside{
    margin-top: 14px;
  }
}
@media (max-width: 760px){
  body.aptofi main.wrap,
  main.wrap{
    padding-top: var(--fixedhead);
  }

  .searchBox{
    padding: 10px 10px;
  }
  .searchBox input[type="search"]{
    min-width: 160px;
  }
  .errTitle{
    font-size:22px;
  }
}


/* ================= SERVICES CLICK SAFETY (PREVENT OVERLAYS) ================= */
/* If any theme overlay (like .card-link) covers the service UI — clicks will not work. */
#ap-images-service{
  position:relative !important;
  z-index:9999 !important;
  pointer-events:auto !important;
}

/* Force all descendants clickable */
#ap-images-service *{
  pointer-events:auto !important;
}

/* Kill typical click-catcher overlays inside service container */
#ap-images-service .card-link,
#ap-images-service .ap-card-link,
#ap-images-service .ap-overlay,
#ap-images-service .media-overlay{
  pointer-events:none !important;
}

/* IMPORTANT: do NOT disable pointer-events inside embedded services (breaks UI clicks) */
.ap-service-embed span{
  pointer-events:auto !important;
}






/* =========================
   Blog comments (APTOFI)
   ========================= */

.ap-comments-wrap{
  margin-top: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.02);
}

.ap-comments-head{ margin-bottom: 10px; }
.ap-comments-title{ font-weight: 800; font-size: 16px; line-height: 1.2; }
.ap-comments-sub{ margin-top: 6px; opacity: .75; font-size: 13px; line-height: 1.35; }

.ap-comments-list{ margin-top: 10px; }
.ap-comments-loading{ opacity: .7; font-size: 13px; }
.ap-comments-error{ opacity: .9; font-size: 13px; }

.ap-c{ padding: 10px 10px; border-radius: 14px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.75); margin-bottom: 10px; }
.ap-c[data-depth="1"]{ margin-left: 14px; }
.ap-c[data-depth="2"]{ margin-left: 28px; }
.ap-c[data-depth="3"]{ margin-left: 42px; }
.ap-c[data-depth="4"]{ margin-left: 56px; }
.ap-c[data-depth="5"]{ margin-left: 70px; }
.ap-c-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ap-c-author{ font-weight: 700; }
.ap-c-time{ opacity:.7; font-size: 12px; }
.ap-reply-btn{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
}
.ap-c-body{ margin-top: 8px; line-height: 1.45; }

.ap-com-form{ margin-top: 12px; }
.ap-com-row{ display:flex; gap:10px; flex-wrap:wrap; }
.ap-com-row .ap-inp{ flex: 1 1 220px; }

.ap-inp, .ap-ta{
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}

.ap-ta{ min-height: 110px; resize: vertical; margin-top: 10px; }

.ap-com-hp{
  position:absolute;
  left:-9999px;
  top:-9999px;
  opacity:0;
  height:0;
  overflow:hidden;
}

.ap-privacy{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top: 10px;
  opacity: .9;
  font-size: 12.5px;
  line-height: 1.35;
}

.ap-com-actions{ display:flex; gap:10px; align-items:center; margin-top: 12px; flex-wrap:wrap; }

.ap-comments-wrap .ap-btn{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  padding: 7px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}
.ap-comments-wrap .ap-btn:hover{ background: rgba(0,0,0,.05); }
.ap-comments-wrap .ap-btn:active{ transform: translateY(1px); }

.ap-comments-wrap .ap-btn.ap-btn-ghost{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.14);
}



/* ================= EMBED SERVICE (RIGHT SIDEBAR) ================= */
/* IMPORTANT:
   - embedded service lives inside RIGHT sidebar card (.ap-sb-box)
   - we do NOT scale/zoom; we adapt layout via embed rules in images.css
   - extra safety: prevent overflow + slightly larger base font in the widget area */

.ap-sidebar-right .ap-sb-box .ap-service-embed{
  width:100%;
  max-width:100%;
  overflow:hidden;

  /* FIX: symmetric inner gutter so widget never touches / crosses the inner frame */
  padding: 0 10px;

  /* UI bigger ~ +1/3 INSIDE widget only (do NOT change sidebar width) */
  font-size: 20px;
  line-height: 1.24;

  /* If something scales the embedded UI — neutralize */
  transform: none !important;
}




.ap-sidebar-right .ap-sb-box .ap-service-embed #ap-images-service{
  width:100%;
  max-width:100%;
  overflow:hidden;
  min-width:0;

  /* FIX: prevent any inner blocks from visually sticking to the right edge */
  margin: 0;
}


/* Safety: do not allow embedded service to force min widths in sidebar */
.ap-sidebar-right .ap-sb-box .ap-service-embed *{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* Safety for long text strings inside widget */
.ap-sidebar-right .ap-sb-box .ap-service-embed,
.ap-sidebar-right .ap-sb-box .ap-service-embed *{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================
   MOBILE: compact header + breadcrumbs
   ========================= */

@media (max-width: 480px) {

  /* Make header area a bit tighter on very small phones */
  .ap-menubar-inner{
    padding: 6px 6px !important;
    gap: 6px !important;
  }

  .ap-brand-name,
  .brand-name{
    font-size: 18px !important;
  }

  .ap-brand-slogan{
    font-size: 14px !important;
  }

  .ap-brand-logo{
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  /* Real breadcrumbs class in your theme */
  .ap-breadcrumbs{
    gap: 6px !important;
    margin: 4px 0 8px !important;
    font-size: 11px !important;
  }
  .ap-breadcrumbs a,
  .ap-bc-current{
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  .ap-bc-sep{
    font-size: 11px !important;
  }
}

.ap-to-top{
  position:fixed;
  right: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  z-index: 1600;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(120,160,255,.26);
  box-shadow: 0 18px 55px rgba(14,25,55,.16);
  backdrop-filter: blur(14px);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s, box-shadow .22s, border-color .22s, background .22s, opacity .22s;
}

.ap-to-top:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(255,87,150,.72), rgba(0,220,255,.72), rgba(139,92,255,.78));
  opacity:.82;
  filter: blur(.2px);
  z-index:-1;
}

.ap-to-top:after{
  content:"";
  width: 16px;
  height: 16px;
  border-right: 3px solid rgba(36,49,84,.92);
  border-top: 3px solid rgba(36,49,84,.92);
  transform: rotate(-45deg) translateY(2px);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.ap-to-top:hover{
  transform: translateY(-3px);
  border-color: rgba(110,160,255,.75);
  box-shadow: 0 26px 70px rgba(14,25,55,.20);
  background: rgba(255,255,255,.90);
}

.ap-to-top:active{
  transform: translateY(-1px);
}

.ap-to-top:focus{
  outline:none;
}

.ap-to-top:focus-visible{
  box-shadow: 0 0 0 4px rgba(79,124,255,.18), 0 26px 70px rgba(14,25,55,.20);
  border-color: rgba(110,160,255,.95);
}

@media (max-width: 760px){
  .ap-to-top{
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .ap-to-top{
    transition:none !important;
  }
}