/* Concrete mix calculator in the RockWalls palette; every rule is scoped to .rwc-mix. */
.rwc-mix{--mix-blue:var(--wp--preset--color--rockwalls-blue,#3f5da3);--mix-navy:var(--wp--preset--color--rockwalls-ink,#263453);--mix-red:var(--wp--preset--color--rockwalls-accent,#c4262e);--mix-ink:#202630;--mix-muted:#64728d;--mix-line:#e2e8f1;--mix-soft:#f5f7fc;max-width:980px;margin:32px auto;color:var(--mix-ink);font-family:Roboto,Arial,sans-serif;font-size:16px;line-height:1.4}
.rwc-mix *{box-sizing:border-box}
/* Site styles recolour every paragraph and override [hidden]; keep the calculator's own look. */
.rwc-mix [hidden]{display:none!important}
.rwc-mix:not(.has-result) .rwc-mix-bar{display:none}
.rwc-mix .rwc-mix-head :is(p,.rwc-mix-kicker,.rwc-mix-title,.rwc-mix-sub){color:#fff!important}
.rwc-mix .rwc-mix-head .rwc-mix-kicker{color:rgba(255,255,255,.72)!important;font-size:13px!important}
.rwc-mix .rwc-mix-head .rwc-mix-title{font-size:clamp(24px,3vw,32px)!important;font-weight:700!important;line-height:1.1!important}
.rwc-mix .rwc-mix-head .rwc-mix-sub{font-size:15px!important;line-height:1.45!important;color:rgba(255,255,255,.9)!important}
.rwc-mix p{margin:0}
.rwc-mix-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 28px;padding:26px 28px 24px;border-radius:16px 16px 0 0;background:linear-gradient(120deg,var(--mix-navy),var(--mix-blue));color:#fff;position:relative;overflow:hidden}
.rwc-mix-head::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07);animation:rwc-mix-float 9s ease-in-out infinite alternate}
@keyframes rwc-mix-float{to{transform:translate(-40px,30px) scale(1.15)}}
.rwc-mix-kicker{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.rwc-mix-title{margin-top:4px!important;font-size:clamp(24px,3vw,32px);font-weight:700;line-height:1.1}
.rwc-mix-sub{max-width:380px;font-size:15px;opacity:.9;position:relative;z-index:1}
.rwc-mix-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border:1px solid var(--mix-line);border-top:0;border-radius:0 0 16px 16px;background:#fff;box-shadow:0 18px 40px rgba(38,52,83,.08)}
.rwc-mix-form{padding:24px 26px 26px;border-right:1px solid var(--mix-line)}
.rwc-mix-main{display:grid;gap:10px;margin-bottom:18px}
.rwc-mix-main .rwc-mix-field{padding:12px 14px;border:1px solid var(--mix-line);border-radius:12px;background:var(--mix-soft);transition:border-color .25s,box-shadow .25s,background-color .25s}
.rwc-mix-main .rwc-mix-field:focus-within{border-color:var(--mix-blue);background:#fff;box-shadow:0 0 0 4px rgba(63,93,163,.12)}
.rwc-mix-main .rwc-mix-field.is-source{border-color:var(--mix-blue);background:#fff}
.rwc-mix-main .rwc-mix-field.is-source>span:first-child::after{content:"исходное";margin-left:8px;padding:2px 7px;border-radius:999px;background:var(--mix-blue);color:#fff;font-size:11px;font-weight:500;vertical-align:2px;animation:rwc-mix-pop .35s cubic-bezier(.2,.9,.3,1.4)}
.rwc-mix-main input{font-size:20px!important;font-weight:700}
.rwc-mix-main .rwc-mix-field.is-filled input{animation:rwc-mix-flash .6s ease}
@keyframes rwc-mix-flash{from{color:var(--mix-blue)}}
@keyframes rwc-mix-pop{from{transform:scale(.6);opacity:0}}
.rwc-mix-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.rwc-mix-field{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;margin:0;font-size:14px;color:var(--mix-ink)}
.rwc-mix-grid .rwc-mix-field{flex-direction:column;align-items:stretch;gap:5px;color:var(--mix-muted);font-size:13px}
.rwc-mix-input,.rwc-mix-ratio{display:flex;align-items:center;gap:6px}
.rwc-mix-input em{min-width:22px;color:var(--mix-muted);font-style:normal;font-size:14px}
.rwc-mix input,.rwc-mix select{width:100%;min-width:0;height:42px;margin:0;padding:0 10px;border:1px solid #cfd8e6;border-radius:9px;background:#fff;color:var(--mix-ink);font:inherit;font-size:16px;text-align:right;transition:border-color .2s,box-shadow .2s;-moz-appearance:textfield}
.rwc-mix-main input{width:130px;border-color:transparent;background:transparent;height:36px}
.rwc-mix select{text-align:left;font-size:15px}
.rwc-mix input::-webkit-inner-spin-button{opacity:.4}
.rwc-mix input:focus,.rwc-mix select:focus{outline:0;border-color:var(--mix-blue);box-shadow:0 0 0 3px rgba(63,93,163,.15)}
.rwc-mix-main input:focus{box-shadow:none;border-color:transparent}
.rwc-mix-ratio b{color:var(--mix-muted)}
.rwc-mix-more{margin-top:18px;border-top:1px solid var(--mix-line)}
.rwc-mix-more summary{display:flex;align-items:center;gap:10px;min-height:46px;color:var(--mix-blue);font-weight:500;cursor:pointer;list-style:none}
.rwc-mix-more summary::-webkit-details-marker{display:none}
.rwc-mix-more summary::before{content:"";width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;transition:transform .3s}
.rwc-mix-more[open] summary::before{transform:rotate(45deg)}
.rwc-mix-more .rwc-mix-grid{padding:4px 0 2px}
.rwc-mix-more[open] .rwc-mix-grid{animation:rwc-mix-open .35s ease}
@keyframes rwc-mix-open{from{opacity:0;transform:translateY(-6px)}}
.rwc-mix-result{display:flex;flex-direction:column;padding:24px 26px 26px;background:linear-gradient(180deg,#fafbfe,#fff)}
.rwc-mix-result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.rwc-mix-result-head p{font-size:20px;font-weight:700}
.rwc-mix-status{padding:4px 10px;border-radius:999px;background:#eef2fa;color:var(--mix-muted);font-size:12px;transition:background-color .3s,color .3s}
.rwc-mix-status.is-done{background:#e5f4ea;color:#17703a}
.rwc-mix-bar{display:flex;height:14px;margin-bottom:16px;overflow:hidden;border-radius:999px;background:var(--mix-soft)}
.rwc-mix-bar span{height:100%;flex:0 0 auto;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.rwc-mix-bar span+span{box-shadow:inset 2px 0 #fff}
.rwc-mix-rows{display:grid;gap:2px;margin:0!important;padding:0!important;list-style:none!important}
.rwc-mix-rows li{display:flex;align-items:center;gap:10px;margin:0!important;padding:10px 0;border-bottom:1px solid var(--mix-line);animation:rwc-mix-row .45s both cubic-bezier(.2,.8,.2,1)}
.rwc-mix-rows li::before{content:none!important}
.rwc-mix-rows i{flex:0 0 auto;width:10px;height:10px;border-radius:3px}
.rwc-mix-rows span{flex:1;min-width:0}
.rwc-mix-rows small{display:block;color:var(--mix-muted);font-size:12px}
.rwc-mix-rows strong{font-variant-numeric:tabular-nums;white-space:nowrap}
@keyframes rwc-mix-row{from{opacity:0;transform:translateX(12px)}}
.rwc-mix-total{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--mix-navy);color:#fff;font-weight:500;animation:rwc-mix-row .45s both}
.rwc-mix-total strong{font-size:18px;font-variant-numeric:tabular-nums}
.rwc-mix-notice{margin-top:12px;padding:11px 13px;border-left:3px solid #d79a1e;border-radius:8px;background:#fff8e8;color:#7a5200;font-size:13px;animation:rwc-mix-row .45s both}
.rwc-mix-empty{display:grid;justify-items:center;gap:10px;margin:auto 0;padding:28px 10px;color:var(--mix-muted);text-align:center;font-size:14px}
.rwc-mix-empty svg{width:56px;height:56px;fill:none;stroke:var(--mix-blue);stroke-width:2;stroke-linejoin:round;animation:rwc-mix-bob 2.6s ease-in-out infinite}
@keyframes rwc-mix-bob{50%{transform:translateY(-6px)}}
.rwc-mix.has-result .rwc-mix-empty{display:none}
.rwc-mix-actions{display:flex;gap:10px;margin-top:18px}
.rwc-mix-actions button{min-height:46px;margin:0;padding:0 18px;border:0;border-radius:9px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background-color .2s,transform .15s}
.rwc-mix-actions button:active{transform:scale(.97)}
.rwc-mix-print{flex:1;background:var(--mix-blue);color:#fff}
.rwc-mix-print:hover{background:var(--wp--preset--color--rockwalls-blue-dark,#354f91)}
.rwc-mix-reset{background:#e9eef6;color:var(--mix-ink)}
.rwc-mix-reset:hover{background:#dde5f1}
.rwc-mix-note{margin-top:12px!important;color:var(--mix-muted);font-size:13px}
@media(max-width:780px){
 .rwc-mix{margin:24px 0}
 .rwc-mix-head{padding:20px 18px}
 .rwc-mix-body{grid-template-columns:1fr}
 .rwc-mix-form{padding:18px;border-right:0;border-bottom:1px solid var(--mix-line)}
 .rwc-mix-result{padding:18px}
 .rwc-mix-main .rwc-mix-field>span:first-child{flex:0 1 auto}
 .rwc-mix-main .rwc-mix-input{flex:1 1 120px;justify-content:flex-end}
 .rwc-mix-main input{width:100%;max-width:150px;font-size:19px!important}
}
@media(max-width:400px){.rwc-mix-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.rwc-mix *,.rwc-mix-head::after{animation:none!important;transition:none!important}}
/* «Распечатать» prints only the calculator, not the whole article. */
@media print{
 html.rwc-mix-printing body *{visibility:hidden!important}
 html.rwc-mix-printing .rwc-mix.is-printing,html.rwc-mix-printing .rwc-mix.is-printing *{visibility:visible!important}
 html.rwc-mix-printing .rwc-mix.is-printing{position:absolute;left:0;top:0;width:100%;margin:0}
 .rwc-mix-actions,.rwc-mix-more,.rwc-mix-empty,.rwc-mix-head::after{display:none!important}
 .rwc-mix-body{box-shadow:none}
}