/*
 * BuildConnect Pakistan — premium responsive safety layer
 * Keeps the light theme readable, removes CDN dependence side effects,
 * and provides stable phone/tablet/desktop behavior across public + admin UI.
 */

:root{
  --bc-ink:#13253b;
  --bc-muted:#68778b;
  --bc-surface:#ffffff;
  --bc-soft:#f4f7fb;
  --bc-border:#e3e9f1;
  --bc-radius-sm:14px;
  --bc-radius-md:20px;
  --bc-mobile-gutter:16px;
}

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background:var(--bc-page-bg,#f7f9fc);
  color:var(--bc-ink,#13253b);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
main,.admin-main,.container,.container-fluid,.row,[class*="col-"]{min-width:0}
img,svg,video,canvas,iframe{max-width:100%}
iframe{width:100%}
pre,code{max-width:100%;overflow-wrap:anywhere}
input,select,textarea,button{max-width:100%}
textarea{resize:vertical}

/* Readable light surfaces even when an unsafe white theme text color was saved. */
.public-site,
.admin-body,
.public-site main,
.admin-main{color:var(--bc-ink,#13253b)}
.public-site :where(.content-card,.project-card,.pro-card,.feature-card,.service-card,.category-card,.step-card,.testimonial-card,.auth-card,.chat-box,.admin-card,.admin-stat),
.admin-body :where(.admin-card,.admin-stat,.modal-content,.dropdown-menu){color:var(--bc-ink,#13253b)}
.public-site :where(.content-card,.project-card,.pro-card,.feature-card,.service-card,.category-card,.step-card,.testimonial-card,.auth-card,.chat-box) :where(h1,h2,h3,h4,h5,h6,strong,b),
.admin-body :where(.admin-card,.admin-stat,.modal-content) :where(h1,h2,h3,h4,h5,h6,strong,b){color:var(--bc-dark,#0b315c)!important}
.public-site :where(.content-card,.project-card,.pro-card,.feature-card,.service-card,.category-card,.step-card,.testimonial-card,.auth-card,.chat-box) :where(p,small,label,li),
.admin-body :where(.admin-card,.admin-stat,.modal-content) :where(p,small,label,li){color:inherit}
.public-site .text-white,.admin-body .text-white{color:#fff!important}

/* Dark sections retain correct contrast. */
.public-site :where(.page-hero,.testimonial-section,.final-cta-card,.premium-footer,.cta) :where(h1,h2,h3,h4,h5,h6,strong){color:#fff!important}
.public-site :where(.page-hero,.testimonial-section,.final-cta-card,.premium-footer,.cta) :where(p,small,span:not(.brand-mark):not(.trust-icon):not(.category-icon):not(.service-icon):not(.avatar)){color:inherit}
.public-site .hero-copy-inner :where(h1,h2,h3,h4,h5,h6){color:#102d4e!important}
.public-site .hero-copy-inner h1 span{color:var(--bc-primary,#d99a16)!important}

/* Buttons: readable on user-selected colors, touch friendly, no clipped labels. */
.btn-primary,.btn-gold{
  color:var(--bc-button-text,#fff)!important;
  background-color:var(--bc-button,#d99a16)!important;
  border-color:var(--bc-button,#d99a16)!important;
}
.btn-primary:hover,.btn-primary:focus,.btn-gold:hover,.btn-gold:focus{
  color:var(--bc-button-text,#fff)!important;
  filter:brightness(.92);
}
.btn{white-space:normal;line-height:1.25;overflow-wrap:anywhere}
.btn-sm{min-height:34px}
.form-control,.form-select,.form-control-color{color:#182b43;background-color:#fff}
.form-control::placeholder{color:#8794a5;opacity:1}
.form-control:disabled,.form-select:disabled{background:#eef2f6;color:#526174}
.form-check-input{flex:0 0 auto}

/* Header and navigation. */
.site-header{width:100%}
.premium-navbar{width:100%;isolation:isolate}
.premium-navbar .container{gap:12px}
.navbar-brand{max-width:calc(100% - 72px);overflow:hidden}
.site-logo{max-width:min(210px,52vw)}
.brand-copy{white-space:nowrap}
.premium-toggler{flex:0 0 auto;background:#fff}
.navbar-toggler-icon{width:1.35em;height:1.35em}
.navbar-collapse{min-width:0}
.nav-actions .dropdown-menu{max-width:min(92vw,320px)}
.premium-dropdown{background:#fff;color:var(--bc-ink,#13253b)}
.premium-dropdown .dropdown-item{white-space:normal}

/* Content cards and media. */
.content-card,.project-card,.pro-card,.auth-card,.chat-box,.admin-card,.admin-stat{
  background:#fff;
  border:1px solid var(--bc-border,#e3e9f1);
}
.content-card{padding:24px;border-radius:var(--bc-radius-md);box-shadow:0 12px 36px rgba(11,49,92,.07)}
.service-card,.project-card,.pro-card,.category-card,.feature-card{overflow:hidden}
.service-image img{display:block;width:100%;height:100%;object-fit:cover}
.project-card,.pro-card{min-height:100%}
.project-card :where(h3,h5),.pro-card :where(h3,h5){overflow-wrap:anywhere}
.meta,.project-meta-row,.pro-meta{min-width:0;gap:10px;flex-wrap:wrap}
.file-pill{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.cms-content img,.content-card img{height:auto}
.content-card table{width:100%}
.content-card>*{max-width:100%}

/* Tables never force the entire page wider than the phone. */
.table-responsive{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.table-responsive>.table,.table-responsive>table{margin-bottom:0;min-width:680px}
.table th,.table td{overflow-wrap:anywhere}
.admin-card .table-responsive{border:1px solid var(--bc-border,#e3e9f1);border-radius:14px}

/* Admin shell baseline. */
.admin-shell{width:100%;max-width:100%}
.admin-main{width:calc(100% - 280px)}
.admin-sidebar{overscroll-behavior:contain}
.admin-top>div{min-width:0}
.admin-top .small{overflow-wrap:anywhere}
.admin-card{max-width:100%}
.setting-asset-preview{max-width:100%}
.setting-asset-preview>div{min-width:0}
.theme-color-control{flex-wrap:wrap}

/* Dashboard/chat/forms. */
.chat-box{max-width:100%}
.msg{overflow-wrap:anywhere;word-break:break-word}
.chat-form>*{min-width:0}
.search-bar>*{min-width:0}
.premium-purchase>*{min-width:0}
.auth-wrap{min-height:calc(100vh - 74px)}

/* Tablet and collapsed navigation. */
@media (max-width:1199.98px){
  .premium-navbar{padding:10px 0;min-height:72px}
  .premium-navbar .container{flex-wrap:wrap}
  .navbar-collapse{
    width:100%;
    flex-basis:100%;
    margin-top:8px;
    padding:12px;
    background:#fff;
    border:1px solid var(--bc-border,#e3e9f1);
    border-radius:16px;
    box-shadow:0 18px 45px rgba(11,49,92,.13);
    max-height:calc(100vh - 96px);
    overflow-y:auto;
  }
  .main-nav-links{width:100%;gap:2px}
  .main-nav-links .nav-item{width:100%}
  .main-nav-links .nav-link{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 13px!important;border-radius:10px}
  .main-nav-links .nav-link:hover,.main-nav-links .nav-link.active{background:var(--bc-primary-soft,#fff7e5)}
  .premium-dropdown{position:static!important;float:none;width:100%;margin:3px 0 8px!important;transform:none!important;box-shadow:none;border-radius:12px}
  .nav-actions{width:100%;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;margin-top:8px}
  .nav-actions>.dropdown{grid-column:1/-1}
  .nav-actions .btn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center}
  body.nav-open{overflow:hidden}
}

@media (max-width:991.98px){
  .hero-shell{grid-template-columns:1fr!important;min-height:0}
  .hero-copy-inner{width:100%;max-width:none;margin:0;padding:52px 34px}
  .hero-image-panel{min-height:390px}
  .service-grid>.col-md-4{width:100%}
  .service-image{height:280px}
  .section-head,.section-heading-row{align-items:flex-start;flex-direction:column}
  .search-bar{grid-template-columns:1fr!important}
  .chat-form{grid-template-columns:1fr!important}
  .premium-purchase{grid-template-columns:1fr!important}
  .sticky-card{position:static!important}

  .admin-sidebar{
    width:min(320px,88vw);
    transform:translateX(-105%);
    transition:transform .25s ease;
    box-shadow:28px 0 70px rgba(7,31,58,.28);
    z-index:1050;
  }
  .admin-sidebar.open{transform:translateX(0)}
  .admin-backdrop{z-index:1040}
  .admin-main{width:100%;margin-left:0!important;padding:14px!important}
  .admin-top{position:static!important;flex-wrap:wrap}
  .admin-top>div:nth-child(2){flex:1 1 240px}
  .admin-top>div:last-child{width:100%}
  .admin-top>div:last-child .btn{flex:1 1 150px}
  .premium-grid{grid-template-columns:1fr!important}
}

@media (max-width:767.98px){
  :root{--bc-mobile-gutter:14px}
  body{font-size:15px}
  .container{--bs-gutter-x:28px}
  .premium-section,.public-site .py-5{padding-top:52px!important;padding-bottom:52px!important}
  .page-hero{padding:50px 0!important}
  .page-hero h1{font-size:clamp(1.9rem,9vw,2.65rem)!important;line-height:1.08}
  .page-hero p{font-size:.98rem}

  .hero-copy-inner{padding:42px 22px}
  .hero-copy-inner h1{font-size:clamp(2.05rem,11vw,3rem)!important;line-height:1.04}
  .hero-copy-inner>p{font-size:1rem;line-height:1.65}
  .hero-actions{display:grid;grid-template-columns:1fr;width:100%}
  .hero-actions .btn{width:100%;min-height:48px}
  .role-switcher{display:grid!important;grid-template-columns:1fr 1fr;width:100%}
  .role-switcher a{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;text-align:center}
  .hero-image-panel{min-height:315px}
  .hero-trust-card{left:16px!important;right:16px!important;bottom:16px!important;width:auto;max-width:none}

  .trust-grid{grid-template-columns:1fr!important}
  .trust-item{align-items:flex-start}
  .category-grid,.marketplace-grid{grid-template-columns:1fr!important}
  .steps-grid{grid-template-columns:1fr!important}
  .step-connector{transform:rotate(90deg)}
  .testimonial-wrap{grid-template-columns:1fr!important}
  .final-cta-card{display:block!important;padding:32px 22px!important;border-radius:20px}
  .final-cta-actions{min-width:0!important;width:100%;display:grid!important;grid-template-columns:1fr;margin-top:24px}
  .final-cta-actions .btn{width:100%}

  .content-card,.admin-card,.admin-stat,.auth-card,.chat-box{padding:20px;border-radius:16px}
  .project-card,.pro-card{padding:20px}
  .service-image{height:230px}
  .section-heading-row{margin-bottom:24px}
  .section-heading-row .text-link{display:inline-flex;padding:8px 0}

  .bid-row{display:block!important}
  .bid-row>.text-end{text-align:left!important;margin-top:14px}
  .msg{max-width:92%!important}
  .chat-form .btn{width:100%}
  .auth-wrap{padding:34px 12px;align-items:flex-start}
  .auth-card{max-width:100%}

  .footer-main{padding:48px 0 32px!important}
  .premium-footer .footer-main{--bs-gutter-x:28px}
  .premium-footer .col-6{width:100%}
  .footer-bottom{align-items:flex-start!important}
  .footer-bottom>div{display:flex;flex-direction:column;gap:10px}
  .footer-bottom a{margin:0!important}

  .admin-main{padding:10px!important}
  .admin-top{padding:14px;margin-bottom:14px;border-radius:15px}
  .admin-top>div:last-child{display:grid!important;grid-template-columns:1fr 1fr}
  .admin-top>div:last-child .btn{width:100%}
  .admin-stat b{font-size:1.65rem}
  .table-responsive>.table,.table-responsive>table{min-width:620px}
}

@media (max-width:575.98px){
  .premium-navbar{min-height:66px}
  .premium-navbar .container{gap:8px}
  .navbar-brand{max-width:calc(100% - 58px);margin-right:0}
  .site-logo{height:38px;max-width:55vw}
  .brand-mark{width:38px;height:38px;flex:0 0 38px}
  .brand-copy{font-size:1.08rem}
  .premium-toggler{padding:.45rem}
  .navbar-collapse{padding:10px;border-radius:14px}
  .nav-actions{grid-template-columns:1fr}

  .hero-copy-inner{padding:38px 18px}
  .hero-copy-inner h1{font-size:clamp(1.95rem,11.5vw,2.55rem)!important}
  .eyebrow{font-size:.68rem;line-height:1.35;white-space:normal}
  .role-switcher{grid-template-columns:1fr}
  .role-switcher a+a{border-left:0;border-top:1px solid #e2e8f0}
  .hero-image-panel{min-height:280px}
  .hero-trust-card{padding:12px 13px}
  .hero-trust-card strong{font-size:.84rem}

  .center-heading h2,.section-heading-row h2{font-size:clamp(1.7rem,9vw,2.2rem)}
  .content-card,.admin-card,.admin-stat,.auth-card,.chat-box{padding:17px}
  .project-card,.pro-card{padding:18px}
  .service-content{padding:22px 18px}
  .service-image{height:205px}
  .category-card{padding:18px}
  .testimonial-card{padding:25px 20px!important}
  .page-hero{padding:42px 0!important}

  .form-control,.form-select{font-size:16px;min-height:46px}
  textarea.form-control{min-height:110px}
  .btn:not(.btn-sm){min-height:44px}
  .btn-lg{font-size:.96rem;padding:.82rem 1rem}

  .admin-top>div:last-child{grid-template-columns:1fr}
  .theme-color-control .form-control-color{width:64px;flex-basis:64px}
  .setting-asset-preview{align-items:flex-start;flex-direction:column}
  .premium-purchase{padding:12px}
  .table-responsive>.table,.table-responsive>table{min-width:580px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}