/* CC-A1: checkout's compact non-modal status, without a page backdrop. */
.cc-a1-navigation-pending {outline:2px solid #093bc6;outline-offset:3px;}
.cc-a1-navigation-status {position:fixed;z-index:1010;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 40px);color:#093bc6;pointer-events:none;}
.cc-a1-navigation-panel {display:flex;align-items:center;gap:20px;box-sizing:border-box;padding:22px 26px;border:2px solid #093bc6;border-radius:15px;background:rgb(255 255 255 / 97%);box-shadow:4px 4px 0 #ff9c22,0 12px 40px rgb(9 59 198 / 16%);text-align:left;}
.cc-a1-navigation-status[hidden] {display:none;}
.cc-a1-navigation-announcement {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
.cc-a1-navigation-text {display:grid;gap:5px;min-width:0;}
.cc-a1-navigation-copy {color:#093bc6;font:800 15px/1.4 Manrope,Arial,sans-serif;overflow-wrap:anywhere;}
.cc-a1-navigation-hint {color:#52637d;font:400 13px/1.5 Lato,Arial,sans-serif;}
.cc-a1-navigation-icon {position:relative;display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border-radius:50%;background:#fff;box-shadow:3px 3px 0 #ff9c22;}
.cc-a1-navigation-icon::before {content:'';position:absolute;inset:-4px;border:4px solid #d8e5ff;border-top-color:#ff7a12;border-right-color:#093bc6;border-radius:50%;animation:cc-a1-navigation-spin .85s linear infinite;}
.cc-a1-navigation-icon svg {width:36px;height:36px;}
@media(max-width:480px) {
 .cc-a1-navigation-status {max-width:calc(100% - 32px);}
 .cc-a1-navigation-panel {padding:17px 18px;gap:15px;}
 .cc-a1-navigation-icon {flex-basis:46px;width:46px;height:46px;}
 .cc-a1-navigation-icon svg {width:30px;height:30px;}
 .cc-a1-navigation-copy {font-size:14px;}
 .cc-a1-navigation-hint {font-size:12px;}
}
@keyframes cc-a1-navigation-spin {to {transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce) {.cc-a1-navigation-icon::before {animation:none;}}

/* Match the existing F3 purchase status to checkout's compact scale. The F3
   state machine still owns its markup, inert form, requests and cleanup. */
body.cc-f3-v2 .cc-f3-pending {display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto;column-gap:20px;row-gap:5px;align-items:center;justify-content:normal;padding:22px 26px;border:2px solid #093bc6;border-radius:15px;background:rgb(255 255 255 / 97%);box-shadow:4px 4px 0 #ff9c22,0 12px 40px rgb(9 59 198 / 16%);text-align:left;box-sizing:border-box;}
body.cc-f3-v2 .cc-f3-overlay-wrap>.cc-f3-pending {min-height:0;width:max-content;max-width:100%;align-self:center;justify-self:center;}
body.cc-f3-v2 .cc-f3-pending::before {grid-column:2;grid-row:1;align-self:end;min-width:0;font:800 15px/1.4 Manrope,Arial,sans-serif;letter-spacing:normal;}
body.cc-f3-v2 .cc-f3-pending>span:last-child {grid-column:2;grid-row:2;align-self:start;min-width:0;color:#52637d;font:400 13px/1.5 Lato,Arial,sans-serif;}
body.cc-f3-v2 .cc-f3-loader {grid-column:1;grid-row:1/3;width:58px;height:58px;min-width:0;margin:0;box-shadow:3px 3px 0 #ff9c22;}
body.cc-f3-v2 .cc-f3-loader::before {inset:-4px;border-width:4px;}
body.cc-f3-v2 .cc-f3-loader::after {width:36px;height:36px;}
@media(max-width:480px) {
 body.cc-f3-v2 .cc-f3-pending {grid-template-columns:46px minmax(0,1fr);column-gap:15px;row-gap:5px;padding:17px 18px;}
 body.cc-f3-v2 .cc-f3-pending::before {font-size:14px;}
 body.cc-f3-v2 .cc-f3-pending>span:last-child {font-size:12px;}
 body.cc-f3-v2 .cc-f3-loader {width:46px;height:46px;}
 body.cc-f3-v2 .cc-f3-loader::after {width:30px;height:30px;}
}