/**
 * ONE PLUS — Virtual office custom blocks
 * Keep styles in theme CSS so ACF/wpautop cannot break page layout.
 * Flat cards: no outer glow, hover lift or animated accent. Rounded borders stay intact.
 */

/* Virtual office pricelist — simple 2-plan card */
.op-vo-price{margin:12px 0 32px}
.op-vo-price,
.op-vo-price *{list-style:none!important}
.op-vo-price__card{
  border:1px solid #e8edf5;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:none;
}
.op-vo-price__bar,
.op-vo-price__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 20px;
  flex-wrap:wrap;
  padding:16px 22px;
  border-bottom:1px solid #eef2f7;
  background:#fff;
}
.op-vo-price__bar-title,
.op-vo-price__title{
  margin:0;
  font-size:17px;
  line-height:1.3;
  font-weight:700;
  color:#131313;
}
.op-vo-price__bar-note,
.op-vo-price__note{
  margin:0;
  font-size:13px;
  line-height:1.35;
  font-weight:500;
  color:#5b6475;
}
.op-vo-price__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
  padding:16px;
  background:#f4f7fb;
}
.op-vo-price__col,
.op-vo-price__plan{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
  min-height:300px;
  padding:36px 22px;
  min-width:0;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e8edf5;
  border-radius:12px;
  overflow:hidden;
  transition:none;
}
.op-vo-price__col::before,
.op-vo-price__plan::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  border-radius:12px 12px 0 0;
  transition:none;
  opacity:.95;
}
/* Start — hero blue gradient */
.op-vo-price__col--start::before,
.op-vo-price__plan--start::before{
  background:linear-gradient(91.91deg,#092B96 0%,#086CDC 100%);
}
/* Renewal — green accent */
.op-vo-price__col:not(.op-vo-price__col--start)::before,
.op-vo-price__plan:not(.op-vo-price__plan--start)::before{
  background:linear-gradient(91.91deg,#17835a 0%,#2bb67a 100%);
}
.op-vo-price__col + .op-vo-price__col,
.op-vo-price__plan + .op-vo-price__plan{
  border-left:1px solid #e8edf5;
}
.op-vo-price__col--start,
.op-vo-price__plan--start{
  background:#fff;
  box-shadow:none;
}
.op-vo-price__badge{
  display:inline-flex;
  align-items:center;
  margin:0 0 6px;
  padding:4px 10px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:linear-gradient(91.91deg,#092B96 0%,#086CDC 100%);
  color:#fff;
  line-height:1.2;
}
.op-vo-price__badge--next{
  background:linear-gradient(91.91deg,#17835a 0%,#2bb67a 100%);
  color:#fff;
}
.op-vo-price__period{
  margin:0;
  font-size:14px;
  line-height:1.3;
  font-weight:600;
  color:#516579;
}
.op-vo-price__amount{
  margin:4px 0 0;
  font-size:42px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
  background:linear-gradient(91.91deg,#092B96 0%,#086CDC 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.op-vo-price__plan:not(.op-vo-price__plan--start) .op-vo-price__amount,
.op-vo-price__col:not(.op-vo-price__col--start) .op-vo-price__amount{
  background:linear-gradient(91.91deg,#17835a 0%,#2bb67a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.op-vo-price__amount span{
  font-size:18px;
  font-weight:700;
  margin-left:4px;
  letter-spacing:0;
}
.op-vo-price__unit{
  margin:0;
  font-size:13px;
  line-height:1.35;
  color:#5b6475;
}
.op-vo-price__month{
  margin-top:10px;
  padding:12px 0 0;
  width:100%;
  border-top:1px solid #e4ebf5;
  border-radius:0;
  background:transparent;
  border-left:0;
  border-right:0;
  border-bottom:0;
  font-size:14px;
  line-height:1.4;
  color:#516579;
}
.op-vo-price__month::before,
.op-vo-price__month::after{content:none!important;display:none!important}
.op-vo-price__plan--start .op-vo-price__month strong,
.op-vo-price__col--start .op-vo-price__month strong{
  color:#086CDC;
  font-weight:700;
}
.op-vo-price__plan:not(.op-vo-price__plan--start) .op-vo-price__month strong,
.op-vo-price__col:not(.op-vo-price__col--start) .op-vo-price__month strong{
  color:#17835a;
  font-weight:700;
}
.op-vo-price__foot{
  padding:14px 22px;
  border-top:1px solid #eef2f7;
  background:#fff;
  font-size:13px;
  line-height:1.5;
  color:#5b6475;
}
.op-vo-price__foot strong{color:#131313;font-weight:700}
@media (max-width:720px){
  .op-vo-price__bar,
  .op-vo-price__head{padding:14px 16px;flex-direction:column;align-items:flex-start;gap:4px}
  .op-vo-price__bar-title,
  .op-vo-price__title{font-size:16px}
  .op-vo-price__grid{grid-template-columns:1fr;gap:10px;padding:12px}
  .op-vo-price__col + .op-vo-price__col,
  .op-vo-price__plan + .op-vo-price__plan{border-left:1px solid #e8edf5}
  .op-vo-price__col,
  .op-vo-price__plan{padding:24px 16px 18px;min-height:0}
  .op-vo-price__amount{font-size:36px}
  .op-vo-price__foot{padding:12px 16px}
}

.op-vo-features{margin:28px 0 36px}
h2.op-vo-features__title,.op-vo-features__title{margin:0 0 22px;text-align:center;font-size:28px;line-height:1.25;font-weight:700;color:#092B96}
.op-vo-features__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.op-vo-features__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  min-height:190px;
  padding:22px 16px 18px;
  background:#fff;
  border:1px solid #e8edf5;
  border-radius:16px;
  box-shadow:none;
  text-align:center;
  transition:none;
}
.op-vo-features__ico{
  width:72px;
  height:72px;
  color:#092B96;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  line-height:1;
  font-weight:700;
  border-radius:50%;
  background:linear-gradient(160deg,#d9e9ff 0%,#c2dbff 100%);
  border:1px solid #aeccf5;
  box-shadow:none;
}
.op-vo-features__text{margin:0;font-size:14px;line-height:1.4;font-weight:600;color:#092B96}
@media (max-width:1024px){
  .op-vo-features__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .op-vo-features__title{font-size:24px}
  .op-vo-features__card{min-height:170px;padding:18px 14px}
}
@media (max-width:560px){
  .op-vo-features{margin:20px 0 28px}
  .op-vo-features__title{font-size:20px;margin-bottom:14px;text-align:left}
  .op-vo-features__grid{grid-template-columns:1fr;gap:10px}
  .op-vo-features__card{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:14px 14px;text-align:left;border-radius:14px}
  .op-vo-features__ico{width:52px;height:52px;font-size:24px}
  .op-vo-features__text{font-size:13px;line-height:1.35}
}

.op-vo-compare{margin:28px 0 36px;padding:0}
.op-vo-compare__card{background:#fff;border-radius:18px;box-shadow:none;border:1px solid #e8edf5;overflow:hidden}
.op-vo-compare__head{padding:18px 20px 14px;border-bottom:1px solid #eef2f7}
.op-vo-compare__title{margin:0;font-size:18px;line-height:1.35;font-weight:700;color:#131313}
/* Beat oneplus-tables.css cols-3 shrink/nowrap that crushed feature labels */
.article-wrap__content--text table.op-vo-compare__table,
.ttx table.op-vo-compare__table,
.op-vo-compare__table{
  width:100%!important;
  max-width:100%!important;
  border-collapse:collapse;
  table-layout:fixed!important;
}
.article-wrap__content--text table.op-vo-compare__table th,
.article-wrap__content--text table.op-vo-compare__table td,
.ttx table.op-vo-compare__table th,
.ttx table.op-vo-compare__table td,
.op-vo-compare__table th,
.op-vo-compare__table td{
  padding:14px 16px;
  vertical-align:middle;
  border-bottom:1px solid #eef2f7;
  font-size:15px;
  line-height:1.4;
  color:#1a1a1a;
  overflow-wrap:break-word;
  word-break:normal;
}
.op-vo-compare__table tr:last-child th,
.op-vo-compare__table tr:last-child td{border-bottom:0}
.op-vo-compare__table thead th{font-size:14px;font-weight:700;text-align:center;background:#fafbfd}
.article-wrap__content--text table.op-vo-compare__table th.op-vo-compare__feat,
.article-wrap__content--text table.op-vo-compare__table td.op-vo-compare__feat,
.article-wrap__content--text table.op-vo-compare__table.oneplus-table--cols-3 th:first-child,
.article-wrap__content--text table.op-vo-compare__table.oneplus-table--cols-3 td:first-child,
.ttx table.op-vo-compare__table th.op-vo-compare__feat,
.ttx table.op-vo-compare__table td.op-vo-compare__feat,
.ttx table.op-vo-compare__table.oneplus-table--cols-3 th:first-child,
.ttx table.op-vo-compare__table.oneplus-table--cols-3 td:first-child,
.op-vo-compare__feat{
  width:78%!important;
  max-width:none!important;
  text-align:left;
  font-weight:500;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}
.article-wrap__content--text table.op-vo-compare__table th.op-vo-compare__col-op,
.article-wrap__content--text table.op-vo-compare__table th.op-vo-compare__col-comp,
.article-wrap__content--text table.op-vo-compare__table td.op-vo-compare__cell,
.ttx table.op-vo-compare__table th.op-vo-compare__col-op,
.ttx table.op-vo-compare__table th.op-vo-compare__col-comp,
.ttx table.op-vo-compare__table td.op-vo-compare__cell,
.op-vo-compare__col-op,
.op-vo-compare__col-comp,
.op-vo-compare__cell{
  width:11%!important;
  max-width:96px;
  padding-left:6px;
  padding-right:6px;
  text-align:center;
  white-space:nowrap;
}
.op-vo-compare__col-op{color:#092B96}
.op-vo-compare__col-comp{color:#1f2a44}
.op-vo-compare__ico{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:5px;color:#fff;font-size:12px;font-weight:700;line-height:1}
.op-vo-compare__ico--yes{background:#092B96}
.op-vo-compare__ico--no{background:#9aa3b2}
.op-vo-compare__mobile{display:none}
@media (max-width:720px){
  .op-vo-compare{margin:20px 0 28px}
  .op-vo-compare__desktop{display:none!important}
  .op-vo-compare__mobile{display:block}
  .op-vo-compare__card{border-radius:14px}
  .op-vo-compare__head{padding:14px 14px 12px}
  .op-vo-compare__title{font-size:15px}
  .op-vo-compare__mrow{padding:14px;border-bottom:1px solid #eef2f7}
  .op-vo-compare__mrow:last-child{border-bottom:0}
  .op-vo-compare__mfeat{font-size:14px;line-height:1.4;margin:0 0 10px;font-weight:600;color:#131313}
  .op-vo-compare__mcols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .op-vo-compare__mcol{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:10px;background:#f7f9fc;border:1px solid #e8edf5}
  .op-vo-compare__mlabel{font-size:12px;font-weight:700;line-height:1.2}
  .op-vo-compare__mlabel--op{color:#092B96}
  .op-vo-compare__mlabel--comp{color:#1f2a44}
}