/* ROAS production QA fixes */ /* Formula card supporting text must stay readable on the light card. */ #mppm-roas-page .hero-card{background:#fff;color:#0b2748;border:1px solid #dbe5ef} #mppm-roas-page .hero-card small{color:#1769e8;font-size:11px} #mppm-roas-page .hero-card strong{color:#071d37;font-size:36px} #mppm-roas-page .hero-card p{color:#4f657b;font-size:13.5px;line-height:1.62} #mppm-roas-page .hero-formula{color:#40566d;font-size:12.5px;line-height:1.58;border-top-color:#dfe7ef} #mppm-roas-page .hero-formula b{color:#0c213b} #mppm-roas-page .hero-margin-note{background:#f4f8fd;border-color:#d7e5f5} #mppm-roas-page .hero-margin-note p{color:#53687d;font-size:11.5px;line-height:1.52} #mppm-roas-page .hero-margin-note p b{color:#0c213b} /* Do not stretch short input cards to match a taller neighbour. */ #mppm-roas-page .field-group{align-items:start} #mppm-roas-page .field{min-height:0;height:auto} #mppm-roas-page .field label{min-height:0} #mppm-roas-page .field small{min-height:0} #mppm-roas-page .field input,#mppm-roas-page .field select{ display:block;height:45px;line-height:45px;padding-top:0;padding-bottom:0 } /* Keep metrics aligned without compressing descriptions. */ #mppm-roas-page .metric{justify-content:flex-start} #mppm-roas-page .metric em{margin-top:auto} /* Production template is already full width, so neutralize old Elementor escape rules. */ #mppm-roas-page{ width:100%!important; max-width:100%!important; left:auto!important; margin-left:0!important; margin-right:0!important; overflow-x:clip; } /* Keep the calculator and Pro workflow visually connected. */ #mppm-roas-page .calculator-section{padding-bottom:18px!important} #mppm-roas-page .mppm-pro-sell{padding-top:24px!important} #mppm-roas-page .mppm-pro-hero{margin-top:0!important} /* Hide prototype-only controls if any stale markup ever appears. */ #mppm-roas-page .mppm-prototype-bar{display:none!important} /* Named save dialog */ #mppm-roas-page .mppm-save-card{width:min(520px,100%)} #mppm-roas-page .mppm-save-name-label{display:block;margin:16px 0 6px;color:#213b57;font-size:12px;font-weight:850} #mppm-roas-page .mppm-save-name-input{width:100%;height:46px;padding:0 12px;border:1px solid #cfdbe7;border-radius:10px;background:#fbfcfe;color:#10233f;font-size:13px;outline:0} #mppm-roas-page .mppm-save-name-input:focus{border-color:#82afe1;box-shadow:0 0 0 3px rgba(23,105,232,.08);background:#fff} #mppm-roas-page .mppm-save-name-help{display:block;margin:6px 0 16px;color:#6b8095;font-size:10.5px} #mppm-roas-page .mppm-save-card .mppm-access-actions{margin-top:0} /* ========================================================= ROAS SAVE + SAMPLE UX ========================================================= */ #mppm-roas-page .field input::placeholder{color:#9aa9b9;opacity:1} #mppm-roas-page .calc-buttons{display:flex;align-items:center;gap:9px;flex-wrap:wrap} #mppm-roas-page .calc-buttons .btn.sample{border:1px solid #b9cbe0;background:#eef5ff;color:#1467d9;font-weight:900} #mppm-roas-page .calc-buttons .btn.sample:hover{background:#e3efff;border-color:#9fb9d8} #mppm-roas-page .calc-button-help{margin:8px 0 0;color:#6f8296;font-size:10.5px;line-height:1.5} #mppm-roas-page .mppm-primary-save{margin-top:12px;padding:14px;border:1px solid #b8d2f2;border-radius:14px;background:linear-gradient(135deg,#eef6ff,#f8fbff);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px} #mppm-roas-page .mppm-primary-save-copy span{display:block;margin-bottom:4px;color:#1467d9;font-size:8.5px;line-height:1.2;font-weight:950;letter-spacing:.07em} #mppm-roas-page .mppm-primary-save-copy strong{display:block;color:#0b2748;font-size:14px;line-height:1.3} #mppm-roas-page .mppm-primary-save-copy p{margin:4px 0 0;color:#5b7187;font-size:10.5px;line-height:1.5} #mppm-roas-page #mppmSaveCalculation{min-height:43px;padding:0 16px;border:1px solid #1467d9;border-radius:10px;background:#1467d9;color:#fff;box-shadow:0 8px 18px rgba(20,103,217,.18);font-size:11px;font-weight:950;cursor:pointer;white-space:nowrap} #mppm-roas-page #mppmSaveCalculation:hover{background:#0f5fc9;border-color:#0f5fc9} #mppm-roas-page .mppm-save-status{margin-top:8px} @media(max-width:620px){#mppm-roas-page .mppm-primary-save{grid-template-columns:1fr}#mppm-roas-page #mppmSaveCalculation{width:100%}} /* ========================================================= ROAS CURRENCY SELECT + RESULT ACTION HOVERS ========================================================= */ #mppm-roas-page .field select#currency{-webkit-appearance:none;appearance:none;height:45px;line-height:normal!important;padding:0 40px 0 12px!important;background-color:#f7f9fc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2317324f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px 16px;cursor:pointer} #mppm-roas-page .field select#currency:focus{background-color:#fff} #mppm-roas-page .field select#currency::-ms-expand{display:none} #mppm-roas-page .result-actions button{border:1px solid #d7e1ec;background:#fbfcfe;color:#3f566f;transition:transform .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease;cursor:pointer} #mppm-roas-page .result-actions button:hover{transform:translateY(-1px);border-color:#a9c4e5;background:#eef5ff;color:#1467d9;box-shadow:0 7px 16px rgba(20,103,217,.10)} #mppm-roas-page .result-actions button:active{transform:translateY(0);box-shadow:none} #mppm-roas-page .result-actions button:focus-visible{outline:0;border-color:#7baeea;box-shadow:0 0 0 3px rgba(20,103,217,.12)} /* ========================================================= ROAS RESET BUTTON INTERACTION ========================================================= */ #mppm-roas-page .calc-buttons .btn.ghost{border:1px solid #cfdbe7;background:#fff;color:#40566d;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease} #mppm-roas-page .calc-buttons .btn.ghost:hover{transform:translateY(-1px);border-color:#9fbce0;background:#f1f6fc;color:#1467d9;box-shadow:0 7px 16px rgba(20,103,217,.09)} #mppm-roas-page .calc-buttons .btn.ghost:active{transform:translateY(0);box-shadow:none} #mppm-roas-page .calc-buttons .btn.ghost:focus-visible{outline:0;border-color:#7baeea;box-shadow:0 0 0 3px rgba(20,103,217,.12)} /* ========================================================= AUTH MODAL DISMISS POLISH ========================================================= */ #mppm-roas-page #mppmAuthModal .mppm-modal-dismiss{width:100%;min-height:42px;margin-top:9px;padding:0 13px;border:1px solid #d9e3ed;border-radius:10px;background:#f8fafc;color:#52687e;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10.5px;font-weight:850;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease} #mppm-roas-page #mppmAuthModal .mppm-modal-dismiss:hover{transform:translateY(-1px);border-color:#bdd0e4;background:#eef5fb;color:#173b62;box-shadow:0 6px 14px rgba(20,48,82,.07)} #mppm-roas-page #mppmAuthModal .mppm-modal-dismiss:active{transform:translateY(0);box-shadow:none} #mppm-roas-page #mppmAuthModal .mppm-modal-dismiss:focus-visible{outline:0;border-color:#8eb8e7;box-shadow:0 0 0 3px rgba(20,103,217,.10)} #mppm-roas-page #mppmAuthModal .mppm-modal-dismiss-arrow{font-size:13px;line-height:1;transition:transform .18s ease} #mppm-roas-page #mppmAuthModal .mppm-modal-dismiss:hover .mppm-modal-dismiss-arrow{transform:translateX(2px)} /* ========================================================= ROAS PROFESSIONAL SERVICES CTA ========================================================= */ #mppm-roas-page .mppm-roas-service-cta{width:min(1180px,calc(100% - 40px));margin:8px auto 24px;padding:22px 24px;border:1px solid #d4e2f0;border-radius:18px;background:linear-gradient(135deg,#f7fbff,#eef5fb);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px} #mppm-roas-page .mppm-roas-service-cta span{display:block;color:#1769e8;font-size:8.5px;font-weight:950;letter-spacing:.07em} #mppm-roas-page .mppm-roas-service-cta h2{margin:7px 0 6px;color:#071d37;font-size:22px;line-height:1.15;letter-spacing:-.5px} #mppm-roas-page .mppm-roas-service-cta p{max-width:780px;margin:0;color:#536b83;font-size:11.5px;line-height:1.6} #mppm-roas-page .mppm-roas-service-cta a{min-height:43px;padding:0 15px;border-radius:10px;background:#1769e8;color:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:10.5px;font-weight:900;white-space:nowrap;box-shadow:0 8px 18px rgba(23,105,232,.14)} #mppm-roas-page .mppm-roas-service-cta a:hover{background:#0f60d8;transform:translateY(-1px)} @media(max-width:700px){#mppm-roas-page .mppm-roas-service-cta{width:min(100% - 24px,1180px);grid-template-columns:1fr}#mppm-roas-page .mppm-roas-service-cta a{width:100%}} /* ========================================================= ROAS UNIFIED RESULT WORKSPACE ACTIONS ========================================================= */ #mppm-roas-page .mppm-result-workspace-actions{margin-top:18px;padding:15px;border:1px solid #cfddeb;border-radius:14px;background:linear-gradient(135deg,#f8fbff,#f2f7fc)} #mppm-roas-page .mppm-result-action-copy{margin-bottom:11px} #mppm-roas-page .mppm-result-action-copy span{display:block;color:#1467d9;font-size:9px;line-height:1.25;font-weight:800;letter-spacing:.05em} #mppm-roas-page .mppm-result-action-copy strong{display:block;margin-top:4px;color:#173653;font-size:13px;line-height:1.4;font-weight:750} #mppm-roas-page .mppm-result-workspace-actions .result-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0} #mppm-roas-page .mppm-result-workspace-actions .result-actions button{width:100%;min-height:42px;padding:8px 10px;border-radius:10px;font-size:12px;font-weight:700;line-height:1.3} #mppm-roas-page .mppm-result-workspace-actions .result-actions .is-primary,#mppm-roas-page .mppm-result-workspace-actions #mppmSaveCalculation{border-color:#1467d9;background:#1467d9;color:#fff;box-shadow:0 8px 18px rgba(20,103,217,.16)} #mppm-roas-page .mppm-result-workspace-actions .result-actions .is-primary:hover,#mppm-roas-page .mppm-result-workspace-actions #mppmSaveCalculation:hover{border-color:#0f5fc9;background:#0f5fc9;color:#fff;box-shadow:0 10px 20px rgba(20,103,217,.20)} #mppm-roas-page .mppm-result-workspace-actions .mppm-save-status{margin-top:10px;padding-top:10px;border-top:1px solid #dde6ef} @media(max-width:900px){#mppm-roas-page .mppm-result-workspace-actions .result-actions{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){#mppm-roas-page .mppm-result-workspace-actions{padding:13px}#mppm-roas-page .mppm-result-workspace-actions .result-actions{grid-template-columns:1fr}#mppm-roas-page .mppm-result-workspace-actions .result-actions button{min-height:44px}} @media (hover:none) and (pointer:coarse) and (max-width:1200px){#mppm-roas-page .mppm-result-workspace-actions .result-actions{grid-template-columns:repeat(2,minmax(0,1fr))}#mppm-roas-page .mppm-result-workspace-actions .result-actions button{min-height:44px;font-size:13px}} /* ========================================================= CANONICAL CALCULATOR INPUT CARD SYSTEM Final input-block layer: match Profit Margin and future Full/Planning tools. ========================================================= */ #mppm-roas-page .input-panel .panel-head{padding:20px 20px 16px!important;border-bottom:0!important;background:linear-gradient(135deg,#071d37,#0b3159)!important;color:#fff!important} #mppm-roas-page .input-panel .panel-head h2{margin:0 0 4px!important;color:#fff!important;font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;font-size:21px!important;line-height:1.2!important;letter-spacing:-.7px!important;font-weight:850!important} #mppm-roas-page .input-panel .panel-head p{margin:0!important;color:#d3dfeb!important;font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;font-size:13px!important;line-height:1.55!important;font-weight:400!important} #mppm-roas-page .input-panel .input-body{padding:20px!important} #mppm-roas-page .input-panel .input-intro{display:flex!important;align-items:flex-start!important;gap:9px!important;margin:0 0 10px!important;padding:11px!important;border:1px solid #dbe6f4!important;border-radius:11px!important;background:#f7fbff!important} #mppm-roas-page .input-panel .input-intro-icon{width:22px!important;height:22px!important;flex:0 0 22px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:#e7f7f1!important;color:#08775d!important;font-size:11px!important;font-weight:900!important} #mppm-roas-page .input-panel .input-intro strong{display:block!important;color:#17324f!important;font-size:11px!important;line-height:1.35!important;font-weight:850!important} #mppm-roas-page .input-panel .input-intro p{margin:2px 0 0!important;color:#60758a!important;font-size:9.5px!important;line-height:1.45!important;font-weight:400!important} #mppm-roas-page .input-panel .field-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important;gap:10px!important} #mppm-roas-page .input-panel .field{min-width:0!important;min-height:0!important;margin:0!important;padding:11px!important;border:1px solid #e1e8f0!important;border-radius:11px!important;background:#fff!important} #mppm-roas-page .input-panel .field.full{grid-column:1/-1!important} #mppm-roas-page .input-panel .field label{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:7px!important;min-height:0!important;margin:0 0 7px!important;color:#071d37!important;font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;font-size:11px!important;line-height:1.28!important;font-weight:850!important;letter-spacing:0!important} #mppm-roas-page .input-panel .field .label-main{display:inline-flex!important;align-items:center!important;gap:4px!important;min-width:0!important;color:#071d37!important;font-size:11px!important;line-height:1.28!important;font-weight:850!important} #mppm-roas-page .input-panel .field label>span:not(.label-main){flex:none!important;margin:1px 0 0 auto!important;color:#7b899b!important;font-size:8px!important;line-height:1.1!important;font-weight:750!important;letter-spacing:0!important;text-transform:none!important} #mppm-roas-page .input-panel .info-tip{width:15px!important;height:15px!important;min-width:15px!important;padding:0!important;border:1px solid #cbd9e8!important;border-radius:50%!important;background:#f7faff!important;color:#55718e!important;font-size:8px!important;line-height:13px!important;font-weight:850!important} #mppm-roas-page .input-panel .field input,#mppm-roas-page .input-panel .field select{width:100%!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0 11px!important;border:1px solid #e4eaf1!important;border-radius:9px!important;background-color:#f7f9fc!important;color:#071d37!important;font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;font-size:13px!important;line-height:44px!important;font-weight:600!important;box-shadow:none!important} #mppm-roas-page .input-panel .field input:focus,#mppm-roas-page .input-panel .field select:focus{border-color:#8bbaff!important;background-color:#fff!important;box-shadow:0 0 0 3px rgba(23,105,232,.08)!important} #mppm-roas-page .input-panel .field input::placeholder{color:#9aa9b9!important;opacity:1!important} #mppm-roas-page .input-panel .input-wrap.prefix input{padding-left:38px!important} #mppm-roas-page .input-panel .prefix-label{left:12px!important;color:#17324f!important;font-size:12px!important;font-weight:800!important} #mppm-roas-page .input-panel .field select#currency{line-height:normal!important;padding:0 40px 0 11px!important;background-color:#f7f9fc!important} #mppm-roas-page .input-panel .field small{display:block!important;min-height:0!important;margin:6px 0 0!important;color:#60758a!important;font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;font-size:9px!important;line-height:1.42!important;font-weight:400!important} #mppm-roas-page .input-panel .advanced-toggle{width:100%!important;min-height:42px!important;margin:12px 0 0!important;padding:11px 12px!important;border:1px dashed #b9cce0!important;border-radius:11px!important;background:#f6f9fc!important;color:#49647e!important;font-size:11px!important;font-weight:900!important} #mppm-roas-page .input-panel .advanced-toggle.is-locked::before{min-width:34px!important;height:22px!important;margin-right:8px!important;padding:0 7px!important;background:#eaf3ff!important;color:#1769e8!important;font-size:9px!important;font-weight:900!important} #mppm-roas-page .input-panel .advanced-fields{margin-top:10px!important;padding-top:0!important;border-top:0!important} #mppm-roas-page .input-panel .calc-buttons{display:flex!important;align-items:stretch!important;gap:9px!important;margin-top:12px!important;flex-wrap:nowrap!important} #mppm-roas-page .input-panel .calc-buttons .btn{min-height:42px!important;padding:11px 13px!important;border-radius:10px!important;font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;font-size:11px!important;line-height:1.2!important;font-weight:900!important;box-shadow:none!important} #mppm-roas-page .input-panel .calc-buttons .btn.primary{flex:1 1 auto!important;border:1px solid #1467d9!important;background:#1467d9!important;color:#fff!important} #mppm-roas-page .input-panel .calc-buttons .btn.sample,#mppm-roas-page .input-panel .calc-buttons .btn.ghost{flex:0 0 auto!important;border:1px solid #cfdbe7!important;background:#fff!important;color:#17324f!important} #mppm-roas-page .input-panel .calc-buttons .btn.sample:hover,#mppm-roas-page .input-panel .calc-buttons .btn.ghost:hover{transform:translateY(-1px)!important;border-color:#9fbce0!important;background:#f1f6fc!important;color:#1467d9!important;box-shadow:0 7px 16px rgba(20,103,217,.09)!important} #mppm-roas-page .input-panel .calc-button-help{margin:7px 0 0!important;color:#60758a!important;font-size:10.5px!important;line-height:1.45!important;font-weight:400!important} @media(max-width:420px){#mppm-roas-page .input-panel .field-group{grid-template-columns:1fr!important}#mppm-roas-page .input-panel .field.full{grid-column:auto!important}#mppm-roas-page .input-panel .calc-buttons{flex-direction:column!important}#mppm-roas-page .input-panel .calc-buttons .btn{width:100%!important}}