/* SAFIRA.id V8.1.0 — Global UI Precision System
   Shared typography, spacing, hero, card, button, form and responsive rules.
   Loaded after legacy/public/panel styles so existing routes and functions remain intact. */
:root{
  --saf-container-max:1280px;
  --saf-font-display:clamp(52px,5vw,68px);
  --saf-font-h1:clamp(34px,4vw,58px);
  --saf-font-h2:clamp(28px,3vw,42px);
  --saf-font-h3:clamp(21px,2vw,28px);
  --saf-font-body-lg:clamp(16px,1.4vw,19px);
  --saf-font-body:16px;
  --saf-font-small:14px;
  --saf-font-label:12px;
  --saf-space-section-lg:clamp(64px,8vw,104px);
  --saf-space-section-md:clamp(48px,6vw,80px);
  --saf-space-section-sm:clamp(36px,5vw,56px);
  --saf-radius-card:18px;
  --saf-radius-input:12px;
  --saf-radius-button:12px;
  --saf-shadow-card:0 12px 34px rgba(11,37,64,.065);
  --saf-shadow-hover:0 18px 44px rgba(11,37,64,.10);
  --saf-header-height:72px;
  --saf-header-height-mobile:64px;
  --saf-navy:#0b2540;
  --saf-green:#0f6b57;
  --saf-muted:#65758a;
  --saf-line:#dfe8e4;
  --saf-soft:#f5f8f7;
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--saf-header-height) + 16px)}
body{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{max-width:100%;height:auto}
[id]{scroll-margin-top:calc(var(--saf-header-height) + 18px)}
.skip-to-content{position:fixed;left:16px;top:-100px;z-index:2000;background:#fff;color:var(--saf-navy);padding:10px 14px;border:1px solid var(--saf-line);border-radius:10px;font-weight:800;text-decoration:none;box-shadow:var(--saf-shadow-card)}
.skip-to-content:focus{top:14px}

/* Container and global public typography */
.public-v8 .container{width:min(100% - 40px,var(--saf-container-max));max-width:var(--saf-container-max);padding-left:0;padding-right:0}
.public-v8 main{min-width:0}
.public-v8 p,.public-v8 li,.public-v8 input,.public-v8 select,.public-v8 textarea{font-size:var(--saf-font-body);line-height:1.65}
.public-v8 .page-title,.public-v8 .hero-title,.public-v8 .v8-page-hero h1{font-size:var(--saf-font-h1)!important;line-height:1.04!important;letter-spacing:-.035em!important;max-width:980px;text-wrap:balance}
.public-v8 .section-title,.public-v8 .v8-section-head h2,.public-v8 h2.section-title{font-size:var(--saf-font-h2)!important;line-height:1.12!important;letter-spacing:-.025em!important;text-wrap:balance}
.public-v8 h3,.public-v8 .v8-requirement-card h3,.public-v8 .v8-product-card h3{line-height:1.26;letter-spacing:-.018em}
.public-v8 .hero-subtitle,.public-v8 .v8-page-hero p{font-size:var(--saf-font-body-lg)!important;line-height:1.65!important;max-width:780px;margin-top:18px!important}
.public-v8 .text-secondary{color:var(--saf-muted)!important}
.public-v8 .sf-badge,.public-v8 .v8-eyebrow,.public-v8 .v8-section-head>span,.public-v8 .v8-section-head>div>span,.public-v8 .v8-page-hero>div>span{font-size:var(--saf-font-label)!important;letter-spacing:.1em!important}

/* Header */
.public-header-inner{height:var(--saf-header-height)!important;gap:22px!important}
.public-brand{font-size:24px!important}
.public-nav{gap:21px!important}
.public-nav a{font-size:13px!important}
.public-nav a.active:after{bottom:-25px!important}
.public-login-link,.public-primary-cta{height:40px!important;padding:0 16px!important;border-radius:var(--saf-radius-button)!important;font-size:13px!important}
.public-menu-btn{width:40px!important;height:40px!important;border-radius:10px!important}

/* Hero system */
.v8-hero{padding:clamp(58px,6vw,82px) 0 clamp(54px,5.5vw,76px)!important;min-height:auto!important}
.v8-hero-grid{gap:clamp(34px,5vw,64px)!important}
.v8-hero h1{font-size:var(--saf-font-display)!important;line-height:1.02!important;letter-spacing:-.045em!important;max-width:850px;text-wrap:balance}
.v8-hero-copy>p{font-size:var(--saf-font-body-lg)!important;line-height:1.65!important;max-width:720px!important;margin:20px 0 24px!important}
.v8-hero-actions{margin-bottom:14px!important}
.v8-hero-visual{border-radius:22px!important;padding:22px!important;box-shadow:0 22px 56px rgba(11,37,64,.10)!important}
.v8-page-hero,.v8-page-hero.compact{padding:clamp(44px,5.5vw,76px) 0!important;min-height:auto!important}
.v8-page-hero+section.v8-section{padding-top:clamp(34px,4vw,58px)!important}

/* Section spacing */
.v8-section{padding:var(--saf-space-section-md) 0!important}
.v8-section.v8-search-section{padding-top:clamp(34px,4vw,52px)!important;padding-bottom:clamp(28px,3.5vw,44px)!important}
.v8-section-head{margin-bottom:clamp(22px,3vw,32px)!important}
.v8-section-head.center{max-width:820px!important;margin-bottom:clamp(22px,3vw,32px)!important}
.v8-section-head p{font-size:15px!important;line-height:1.65!important;max-width:760px}
.public-v8 .container.py-5{padding-top:clamp(40px,5vw,68px)!important;padding-bottom:clamp(44px,5vw,72px)!important}
.public-v8 .container.pb-5{padding-bottom:clamp(44px,5vw,72px)!important}
.public-v8 .container.py-5>.mb-4:first-child{margin-bottom:24px!important;max-width:900px}
.public-v8 .container.py-5>.mb-4:first-child .section-title{margin-top:12px!important;margin-bottom:8px!important}

/* Search and filter */
.v8-search-bar,.v8-filter-bar,.sf-search{border-radius:16px!important;box-shadow:0 10px 30px rgba(11,37,64,.06)!important}
.v8-filter-bar{margin-bottom:24px!important}
.v8-search-bar input,.v8-search-bar select,.v8-filter-bar input,.v8-filter-bar select,.public-v8 .form-control,.public-v8 .form-select{min-height:48px!important;height:auto;border-radius:var(--saf-radius-input)!important;font-size:15px!important;line-height:1.35!important}
.public-v8 textarea.form-control{min-height:120px!important;padding-top:12px!important}
.public-v8 .form-label,.public-v8 label:not(.v8-check){font-size:14px!important;font-weight:700;color:#405266}
.public-v8 form .row.g-2,.public-v8 form .row.g-3{row-gap:16px!important}

/* Buttons */
.public-v8 .btn,.public-v8 button,.public-v8 .v8-btn-primary,.public-v8 .v8-btn-secondary{min-height:44px;border-radius:var(--saf-radius-button)!important;font-size:14px!important;font-weight:700!important;line-height:1.2}
.public-v8 .btn-sm{min-height:36px!important;font-size:13px!important;padding:0 14px!important}
.public-v8 .btn-lg{min-height:50px!important;font-size:15px!important;padding:0 24px!important}
.public-v8 .btn-primary-soft,.public-v8 .btn-outline-soft{border-radius:var(--saf-radius-button)!important;padding-left:20px!important;padding-right:20px!important}
.v8-btn-primary,.v8-btn-secondary{min-height:46px!important;padding:0 20px!important}

/* Cards */
.public-v8 .sf-card,.public-v8 .card-clean,.v8-requirement-card,.v8-product-card,.v8-directory-grid article,.v8-steps>div,.v8-feature-grid article,.v8-contact-card,.v8-contact-form,.v8-register-choice>a,.category-tile,.policy-card,.policy-hero{border-radius:var(--saf-radius-card)!important;border-color:var(--saf-line)!important;box-shadow:var(--saf-shadow-card)!important}
.public-v8 .sf-card,.public-v8 .card-clean{padding:clamp(20px,2vw,26px)!important}
.v8-requirement-card,.v8-steps>div,.v8-feature-grid article,.v8-directory-grid article{padding:clamp(20px,2vw,26px)!important;height:auto!important;min-height:0!important}
.v8-card-grid,.v8-product-grid,.v8-supplier-grid,.v8-directory-grid,.v8-feature-grid{gap:18px!important}
.v8-requirement-card h3,.v8-product-card h3,.v8-directory-grid h2{font-size:clamp(18px,1.5vw,21px)!important;margin-top:14px!important}
.v8-requirement-card>p,.v8-product-card p,.v8-directory-grid p{font-size:14px!important;line-height:1.6!important}
.v8-requirement-card dl{margin:16px 0!important;gap:8px!important}
.v8-requirement-card dt,.v8-requirement-card dd,.v8-directory-meta{font-size:13px!important}
.v8-product-image{border-radius:14px!important;overflow:hidden}
.v8-empty,.empty-state{padding:30px 22px!important;border-radius:16px!important;font-size:15px!important;line-height:1.6!important}
.sf-card-hover:hover,.v8-requirement-card:hover,.v8-register-choice>a:hover{transform:translateY(-2px)!important;box-shadow:var(--saf-shadow-hover)!important}

/* Homepage precision */
.public-page-index .v8-trust-strip{margin-top:0}
.public-page-index .v8-metrics div{padding:20px 16px!important}
.public-page-index .v8-metrics strong{font-size:clamp(24px,2.5vw,31px)!important}
.public-page-index .v8-metrics span{font-size:12px!important}
.v8-dual-cta{border-radius:20px!important}
.v8-dual-cta>div{padding:clamp(28px,4vw,40px)!important}
.v8-dual-cta h2{font-size:clamp(24px,2.5vw,32px)!important}

/* Old public listing/detail pages normalized */
.public-page-products .container.py-5,.public-page-requirements .container.py-5{padding-top:44px!important}
.public-page-products .sf-search,.public-page-requirements .sf-search{padding:12px!important;border:1px solid var(--saf-line)!important;background:#fff!important}
.public-page-products .row.g-4,.public-page-requirements .row.g-4{--bs-gutter-x:18px;--bs-gutter-y:18px}
.public-page-products h4,.public-page-requirements h4{font-size:20px!important;line-height:1.28!important}
.public-page-requirement-detail .section-title{font-size:clamp(28px,3vw,42px)!important}
.public-page-requirement-detail .bg-light{border:1px solid #e9efec;background:#f8faf9!important;border-radius:14px!important}
.public-page-post-requirement .sf-card,.public-page-supplier-register .card-clean{max-width:1080px;margin-inline:auto}
.public-page-become-supplier .hero-title{font-size:var(--saf-font-h1)!important;max-width:820px!important}
.public-page-become-supplier .row.align-items-center{padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(30px,4vw,52px)}

/* Supplier network exact hierarchy */
.public-page-suppliers .v8-page-hero h1{max-width:900px!important}
.public-page-suppliers .v8-page-hero+section{padding-top:38px!important}

/* How it works / buyers / suppliers */
.v801-process-grid article{min-height:0!important;padding:20px!important}
.v801-process-grid h3,.v801-buyer-grid h2{font-size:clamp(18px,1.5vw,21px)!important}
.v801-process-grid p,.v801-buyer-grid p{font-size:15px!important;line-height:1.65!important}
.v801-buyer-grid article{padding:22px!important}

/* Login and authentication */
.v801-login-page{background:#f5f8f7!important}
.v801-login-top{height:68px!important}
.v801-login-main{padding:clamp(28px,5vw,52px) 18px!important}
.v801-login-card{width:min(100%,460px)!important;padding:clamp(28px,3vw,38px)!important;border-radius:20px!important;box-shadow:0 18px 48px rgba(11,37,64,.09)!important}
.v801-login-heading{margin-bottom:24px!important}
.v801-login-heading h1{font-size:clamp(29px,3vw,35px)!important;line-height:1.12!important}
.v801-login-heading p{font-size:15px!important;line-height:1.55!important;max-width:360px!important}
.v801-login-form>label{margin-bottom:17px!important;gap:7px!important}
.v801-login-form>label>span:first-child{font-size:14px!important}
.v801-login-form input{height:49px!important;font-size:15px!important;border-radius:12px!important}
.v801-login-submit{height:49px!important;font-size:15px!important;border-radius:12px!important}
.v801-login-row{font-size:13px!important;margin-bottom:18px!important}
.v801-login-secondary{margin-top:22px!important;padding-top:18px!important}
.v801-login-secondary>span,.v801-login-secondary a,.v801-login-support{font-size:13px!important}
.v801-login-footer{font-size:12px!important}

/* Policies, FAQ, contact and registration */
.policy-page{font-size:16px!important}
.policy-hero{padding:clamp(22px,3vw,34px)!important}
.policy-hero h1{font-size:var(--saf-font-h1)!important;max-width:960px}
.policy-hero p{font-size:16px!important;max-width:760px!important}
.policy-card{padding:clamp(22px,3vw,32px)!important}
.v8-register-choice{gap:18px!important}
.v8-register-choice>a{padding:clamp(24px,3vw,32px)!important}
.v8-register-choice h2{font-size:clamp(23px,2.5vw,29px)!important}
.v8-contact-grid{gap:20px!important}
.v8-contact-form{padding:clamp(22px,3vw,30px)!important}

/* Dashboard / panels: functional density */
.dashboard{font-size:14px!important}
.dashboard .main-panel{padding:18px 20px 28px!important}
.dashboard .panel-hero,.dashboard .pro-soft-hero,.dashboard .v432-hero,.dashboard .v5-hero,.dashboard .enterprise-hero{padding:18px 20px!important;border-radius:16px!important;min-height:0!important;margin-bottom:14px!important}
.dashboard .panel-hero h1,.dashboard .pro-soft-hero h1,.dashboard .v432-hero h1,.dashboard .v5-hero h1,.dashboard .enterprise-hero h1,.dashboard .section-title{font-size:clamp(24px,2.5vw,34px)!important;line-height:1.15!important;letter-spacing:-.025em!important}
.dashboard .panel-hero p,.dashboard .pro-soft-hero p,.dashboard .v432-hero p,.dashboard .v5-hero p,.dashboard .enterprise-hero p{font-size:14px!important;line-height:1.55!important;max-width:900px}
.dashboard .sf-card,.dashboard .card-clean,.dashboard .metric-card,.dashboard .stat-card,.dashboard .table-card,.dashboard .report-tile,.dashboard .score-box,.dashboard .pro-card{border-radius:15px!important;box-shadow:0 8px 24px rgba(15,23,42,.045)!important}
.dashboard .sf-card,.dashboard .card-clean,.dashboard .pro-card{padding:18px!important}
.dashboard .metric-card,.dashboard .stat-card{padding:17px!important}
.dashboard .metric-card .value,.dashboard .stat-card .h3,.dashboard .kpi-big{font-size:clamp(26px,2.5vw,34px)!important}
.dashboard .table td,.dashboard .table th{padding:9px 10px!important;line-height:1.4!important}
.dashboard .table th{font-size:11px!important}
.dashboard .table td{font-size:13px!important}
.dashboard .btn{min-height:40px!important;font-size:13px!important;border-radius:10px!important;padding:7px 12px!important}
.dashboard .btn-sm{min-height:34px!important;font-size:12px!important}
.dashboard .form-control,.dashboard .form-select{min-height:42px!important;font-size:13.5px!important;border-radius:10px!important}
.dashboard textarea.form-control{min-height:110px!important}
.dashboard .empty-state{padding:24px 18px!important;font-size:14px!important}
.dashboard .table-card{overflow-x:auto!important}
.dashboard .table-card .table{margin-bottom:0}
.dashboard .sidebar{width:252px!important}
.dashboard .main-panel{margin-left:252px!important}

/* Long tables and tabs */
.table-responsive,.table-card{max-width:100%}
.soft-tabs,.nav-tabs,.toolbar,.admin-page-actions{row-gap:8px!important}
.soft-tab,.nav-tabs .nav-link{white-space:nowrap}

/* Laptop */
@media (max-width:1440px){
  :root{--saf-container-max:1220px}
  .v8-hero h1{font-size:clamp(44px,4.7vw,62px)!important}
  .v8-page-hero h1{font-size:clamp(38px,4vw,54px)!important}
  .v8-hero{padding-top:62px!important;padding-bottom:60px!important}
  .v8-section{padding:clamp(50px,5vw,72px) 0!important}
}

/* Tablet */
@media (max-width:1024px){
  :root{--saf-header-height:68px}
  .public-v8 .container{width:min(100% - 48px,var(--saf-container-max))}
  .v8-hero-grid{grid-template-columns:1fr!important}
  .v8-hero-visual{max-width:720px;width:100%}
  .v8-page-hero h1{font-size:clamp(38px,5vw,46px)!important}
  .v8-section-head h2{font-size:clamp(28px,4vw,36px)!important}
  .dashboard .sidebar{width:238px!important}
  .dashboard .main-panel{margin-left:238px!important}
}

/* Mobile */
@media (max-width:767px){
  :root{--saf-header-height:64px;--saf-font-body:15px}
  html{scroll-padding-top:78px}
  [id]{scroll-margin-top:78px}
  .public-v8 .container{width:min(100% - 36px,var(--saf-container-max))}
  .public-header-inner{height:var(--saf-header-height-mobile)!important;gap:10px!important}
  .public-brand{font-size:21px!important}
  .public-header-actions{gap:7px!important}
  .public-menu-btn{width:38px!important;height:38px!important}
  .v8-hero{padding:42px 0 44px!important}
  .v8-hero h1{font-size:clamp(34px,9.4vw,38px)!important;line-height:1.07!important;letter-spacing:-.035em!important}
  .v8-hero-copy>p{font-size:16px!important;margin:16px 0 20px!important}
  .v8-page-hero,.v8-page-hero.compact{padding:40px 0 42px!important}
  .v8-page-hero h1,.public-v8 .page-title,.public-v8 .hero-title{font-size:clamp(32px,9vw,38px)!important;line-height:1.08!important}
  .v8-page-hero p,.public-v8 .hero-subtitle{font-size:15.5px!important;margin-top:14px!important}
  .v8-section{padding:48px 0!important}
  .v8-page-hero+section.v8-section{padding-top:32px!important}
  .v8-section-head{display:block!important;margin-bottom:22px!important}
  .v8-section-head h2,.public-v8 .section-title{font-size:clamp(26px,7.5vw,32px)!important;line-height:1.14!important}
  .v8-section-head>a{display:inline-block;margin-top:12px}
  .v8-card-grid,.v8-product-grid,.v8-supplier-grid,.v8-directory-grid,.v8-feature-grid,.v8-steps,.v8-register-choice,.v8-dual-cta,.v801-buyer-grid,.v801-process-grid{grid-template-columns:1fr!important}
  .v8-search-bar,.v8-filter-bar,.v8-form-grid{grid-template-columns:1fr!important}
  .v8-search-bar button,.v8-filter-bar button{height:48px!important;grid-column:auto!important}
  .v8-requirement-card,.v8-steps>div,.v8-feature-grid article,.v8-directory-grid article,.v801-buyer-grid article,.v801-process-grid article{padding:20px!important}
  .v8-hero-actions{display:grid!important;gap:10px!important}
  .v8-btn-primary,.v8-btn-secondary{width:100%!important}
  .v8-metrics{grid-template-columns:1fr 1fr!important}
  .v8-metrics div{padding:18px 12px!important}
  .public-v8 .container.py-5{padding-top:38px!important;padding-bottom:50px!important}
  .public-v8 .row.g-4{--bs-gutter-y:16px}
  .public-v8 .d-flex.gap-2.mt-4{flex-direction:column}
  .public-v8 .d-flex.gap-2.mt-4 .btn{width:100%}
  .v801-login-top{height:64px!important}
  .v801-login-main{padding:22px 12px 32px!important}
  .v801-login-card{padding:27px 20px!important}
  .v801-login-heading h1{font-size:30px!important}
  .v801-login-footer{padding:16px 18px!important}
  .dashboard .sidebar{width:100%!important}
  .dashboard .main-panel{margin-left:0!important;padding:14px!important}
  .dashboard .panel-hero,.dashboard .pro-soft-hero,.dashboard .v432-hero,.dashboard .v5-hero,.dashboard .enterprise-hero{padding:16px!important}
  .dashboard .panel-hero h1,.dashboard .pro-soft-hero h1,.dashboard .v432-hero h1,.dashboard .v5-hero h1,.dashboard .enterprise-hero h1,.dashboard .section-title{font-size:clamp(24px,7vw,30px)!important}
  .dashboard .sf-card,.dashboard .card-clean,.dashboard .pro-card{padding:16px!important}
  .dashboard .table{min-width:680px}
}

@media (max-width:390px){
  .public-v8 .container{width:min(100% - 32px,var(--saf-container-max))}
  .v8-hero h1,.v8-page-hero h1,.public-v8 .page-title,.public-v8 .hero-title{font-size:32px!important}
  .v8-section-head h2,.public-v8 .section-title{font-size:27px!important}
  .v801-login-card{padding:24px 17px!important}
  .v801-login-heading h1{font-size:28px!important}
}

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