/* CreedForge Professional UI v7 — visual-only overrides. Index design remains the source of truth. */
:root{--cf-blue:#1677f9;--cf-blue-dark:#0754c8;--cf-page:#f5f8fd;--cf-text:#17243b;--cf-muted:#8290a5;--cf-line:#e5ebf4;--cf-soft:#eef6ff}
html,body{overflow-x:hidden}
.cf-client-sidebar,.cf-top,.cf-order-topbar{box-shadow:none!important}
.cf-client-brand img{height:38px!important;max-width:178px!important}
.cf-mobile-brand{display:none!important;align-items:center!important;flex:0 0 auto!important}
.cf-mobile-brand-logo{width:auto!important;height:32px!important;max-width:126px!important;object-fit:contain!important}
.cf-orders-page,.cf-profile-page{max-width:1320px!important}
/* Orders: one clean vertical card; project identity always starts from the left edge. */
.cf-orders-page .cf-order-card{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;grid-template-columns:none!important;grid-template-rows:none!important;gap:0!important;padding:18px!important}
.cf-orders-page .cf-order-main{width:100%!important;display:grid!important;grid-template-columns:156px minmax(0,1fr)!important;justify-content:start!important;justify-items:stretch!important;align-items:center!important;gap:17px!important;margin:0!important;padding:0!important}
.cf-orders-page .cf-order-thumb{justify-self:start!important}
.cf-orders-page .cf-order-info{justify-self:start!important;text-align:left!important}
.cf-orders-page .cf-order-meta{width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:16px 0 0!important;align-self:stretch!important}
.cf-orders-page .cf-order-progress{width:100%!important;margin-top:16px!important}
.cf-orders-page .cf-order-actions{width:100%!important;margin-top:13px!important}
.cf-orders-page .cf-order-thumb img{object-fit:cover!important}
.cf-orders-page .cf-order-thumb img[src=""],.cf-orders-page .cf-order-thumb img:not([src]){display:none!important}
/* Shared image fallback / professional card rhythm */
.cf-feature-media img,.cf-mini-thumb img,.cf-project-image img,.cf-circle img,.cf-order-thumb img{background:#eef6ff}
.cf-project-card,.cf-order-card,.cf-feature-project,.cf-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.cf-project-card:hover,.cf-order-card:hover{transform:translateY(-1px)}
/* Keep the mobile client topbar identical across index/category/orders/profile. */
@media(max-width:700px){
 .cf-mobile-brand{display:flex!important}
 .cf-top{display:flex!important;align-items:center!important}
 .cf-search{order:2!important;min-width:0!important;flex:1!important}
 .cf-userbar{order:3!important}
 .cf-orders-page .cf-order-card{padding:13px!important}
 .cf-orders-page .cf-order-main{grid-template-columns:104px minmax(0,1fr)!important;gap:12px!important}
 .cf-orders-page .cf-order-thumb{width:104px!important;height:82px!important;min-width:104px!important;min-height:82px!important}
 .cf-orders-page .cf-order-meta{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:13px!important}
}
/* Order flow top bar: logo only, same brand proportions as the main client header. */
.cf-order-topbar{height:76px!important;padding:0 28px!important;justify-content:flex-start!important}
.cf-order-brand-only{display:flex!important;align-items:center!important;text-decoration:none!important}
.cf-order-brand-logo{width:auto!important;height:38px!important;max-width:150px!important;object-fit:contain!important}
@media(max-width:700px){.cf-order-topbar{height:64px!important;padding:0 16px!important}.cf-order-brand-logo{height:32px!important;max-width:126px!important}}
/* Remove legacy phone-mockup sizing on order-flow desktop. */
@media(min-width:701px){body.cf-order-app .app{width:100%!important;max-width:none!important;height:auto!important;min-height:100vh!important;border:0!important;border-radius:0!important;box-shadow:none!important}body.cf-order-app .cf-sidebar{display:flex!important}body.cf-order-app .cf-main{margin-left:236px!important}}

/* Order Step 1 — desktop project image is stacked above project information. */
@media(min-width:901px){
  .cf-order-app .step1-project-card{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .cf-order-app .step1-cover{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    background:#eef6ff!important;
  }
  .cf-order-app .step1-cover img{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:420px!important;
    aspect-ratio:16/7!important;
    object-fit:cover!important;
    object-position:center!important;
    border-radius:0!important;
    display:block!important;
  }
  .cf-order-app .step1-body{
    width:100%!important;
    padding:24px 30px 28px!important;
  }
}
@media(min-width:701px) and (max-width:900px){
  .cf-order-app .step1-project-card{display:block!important;padding:0!important}
  .cf-order-app .step1-cover img{width:100%!important;height:auto!important;max-height:360px!important;aspect-ratio:16/9!important;object-fit:cover!important;border-radius:0!important}
  .cf-order-app .step1-body{padding:22px!important}
}
@media(max-width:700px){
  .cf-order-app .step1-cover img{height:200px!important;max-height:200px!important;aspect-ratio:auto!important;object-fit:cover!important}
}

/* Never use the site logo as a project/product-image fallback. */
.cf-project-image img,.cf-order-thumb img,.cf-mini-thumb img,.cf-feature-media img,.step1-cover img{background:#eef6ff!important}

/* Global overflow protection — long names, URLs, emails and user supplied text must never break the layout. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%;box-sizing:border-box}
.cf-client-app,.cf-main,.cf-page-content,.cf-page-content>*{min-width:0}
.cf-page-content h1,.cf-page-content h2,.cf-page-content h3,.cf-page-content h4,.cf-page-content h5,.cf-page-content h6,
.cf-page-content p,.cf-page-content span,.cf-page-content small,.cf-page-content label,
.cf-page-content td,.cf-page-content th,.cf-page-content a,.cf-page-content button{overflow-wrap:anywhere;word-break:break-word}
.cf-page-content pre,.cf-page-content code{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.cf-page-content table{max-width:100%}
.cf-page-content .table-wrap,.cf-page-content .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cf-page-content .cf-project-actions a,.cf-page-content .cf-heading-btn,.cf-page-content .cf-primary-btn,.cf-page-content .cf-secondary-btn{white-space:normal;text-align:center;line-height:1.35}
.cf-page-content input,.cf-page-content textarea,.cf-page-content select{min-width:0}
.cf-page-content .cf-input,.cf-page-content textarea{overflow-wrap:anywhere}
/* URLs and credentials are especially likely to be long. */
.cf-page-content a[href^="http"],.cf-page-content .demo-url,.cf-page-content .vault-value,.cf-page-content .url,.cf-page-content .email{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:700px){
 .cf-page-heading{align-items:stretch;flex-direction:column;gap:10px}
 .cf-page-heading h1{font-size:23px;line-height:1.25}
 .cf-profile-identity{align-items:flex-start;flex-wrap:wrap}
 .cf-active-badge{margin-left:0}
 .cf-profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cf-feature-project{grid-template-columns:1fr}
 .cf-feature-media{min-height:150px}
 .cf-profile-grid{grid-template-columns:1fr}
 .cf-action-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
 .cf-action-grid{grid-template-columns:1fr}
 .cf-page-heading h1{font-size:21px}
}