@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');

:root{
  --primary:#153A5B;
  --primary-dark:#263970;
  --primary-light:#1E527F;
  --gold:#D4AF37;
  --bg:#F3F6FB;
  --card:#fff;
  --border:#202121;
  --text:#072248;
  --muted:#6B7280;
  --danger:#DC2626;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:12px
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth
}

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 'Poppins',sans-serif
}

a{
  color:inherit;
  text-decoration:none;
  transition:.25s ease
}

button,input,select{
  font:inherit
}

.sa-header{
  position:sticky;
  top:0;
  z-index:50;
  height:86px;
  padding:0 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#f6f3f3da;
  background:#12385A url('../images/header-bg.png') 75% center/cover no-repeat;
  box-shadow:0 3px 12px rgba(0,0,0,.12)
}

.sa-header:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:#D7AA3B
}

.sa-brand{
  display:flex;
  align-items:center;
  gap:18px
}

.sa-bos-logo{
  height:94px;
  width:auto;
  object-fit:contain;
  transform:translateX(-8px)
}

.sa-divider{
  width:2px;
  height:42px;
  border-radius:20px;
  background:var(--gold)
}

.sa-title-wrap{
  line-height:1.05
}

.sa-title{
  font-family:'Montserrat',sans-serif;
  font-size:20px;
  font-weight:600;
  letter-spacing:.7px
}

.sa-subtitle{
  margin-top:5px;
  color:#D9E3EF;
  font-size:9px;
  font-weight:600;
  letter-spacing:.8px
}

.sa-status{
  padding:6px 11px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.6px
}

main{
  width:min(1180px,calc(100% - 56px));
  margin:0 auto;
  padding:32px 0 46px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:22px;
  align-items:start
}

main>h1,
main>.muted{
  grid-column:1 / -1
}

main>h1{
  color:var(--primary-dark);
  font-size:30px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.4px
}

main>.muted{
  margin:5px 0 20px;
  color:var(--muted);
  font-size:13px
}

.card{
  margin-bottom:18px;
  padding:19px 21px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}

main>.card:nth-of-type(1){
  grid-column:1
}

main>.card:nth-of-type(2){
  grid-column:2
}

main>.card:nth-of-type(3){
  grid-column:1 / -1
}

label{
  display:block;
  margin-bottom:10px;
  color:var(--primary-dark);
  font-size:10px;
  font-weight:700;
  letter-spacing:.65px;
  text-transform:uppercase
}

.seg,
.categories{
  display:grid;
  gap:10px
}

.seg{
  grid-template-columns:repeat(2,1fr)
}

.categories{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.seg a,
.categories a{
  min-height:46px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#fff;
  border:1px solid #D9E1E8;
  border-radius:9px;
  color:var(--primary-dark);
  font-size:12px;
  font-weight:600
}

.seg a:hover,
.categories a:hover{
  border-color:var(--primary-light)
}

.seg a.on,
.categories a.selected{
  color:#fff;
  background:var(--primary-dark);
  border-color:var(--primary-dark);
  box-shadow:0 4px 10px rgba(15,45,71,.14)
}

.section-title{
  margin:0 0 9px;
  color:var(--primary-dark);
  font-size:19px;
  line-height:1.25;
  font-weight:700
}

.group-title{
  margin:18px 0 5px;
  color:var(--primary-dark);
  font-size:12px;
  font-weight:700
}

.item{
  min-height:42px;
  margin:0;
  padding:9px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid #EEF1F5;
  color:var(--text);
  font-size:12px;
  font-weight:500;
  text-transform:none;
  letter-spacing:0
}

.item:last-child{
  border-bottom:0
}

.item strong{
  flex:0 0 auto;
  color:var(--primary-dark);
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

.package-contents{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--border)
}

.package-content-item{
  padding:7px 0;
  border-bottom:1px solid #F0F2F5;
  font-size:12px
}

.package-content-item:last-child{
  border-bottom:0
}

.card p.muted{
  color:var(--muted);
  font-size:12px
}

.total-card{
  grid-column:1 / -1;
  margin:0 0 18px;
  padding:18px 21px;
  background:#0F2D47;
  border:1px solid #0F2D47;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  color:#fff
}

.total-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}

.total-label{
  display:block;
  margin-bottom:4px;
  color:#D9E3EF;
  font-size:9px;
  font-weight:700;
  letter-spacing:.8px
}

.total-head>div>strong{
  display:block;
  font-size:25px;
  line-height:1.15;
  font-weight:700
}

.total-reset{
  min-height:34px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:8px;
  background:transparent;
  color:#fff;
  font-size:10px;
  font-weight:600;
  cursor:pointer
}

.total-reset:hover{
  background:rgba(255,255,255,.1)
}

.selected-list{
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.16)
}

.selected-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:6px 0;
  color:#EAF1F8;
  font-size:11px
}

.selected-row strong{
  color:#fff;
  font-size:11px;
  white-space:nowrap
}

.master-link{
  grid-column:1 / -1;
  width:max-content;
  margin:0 auto;
  padding:9px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #D9E1E8;
  border-radius:9px;
  background:#fff;
  color:var(--primary-dark);
  font-size:11px;
  font-weight:600;
  box-shadow:0 3px 10px rgba(0,0,0,.04)
}

.master-link:hover{
  border-color:var(--primary)
}
.master-head,
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px
}

.master-page .master-head{
    grid-column:1 / -1;
}

.master-page main > .card{
    grid-column:1 / -1;
}

.master-head{
    margin-bottom:14px
}

.master-head h1{
  color:var(--primary-dark);
  font-size:25px;
  font-weight:700
}

.small-btn,
.btn{
  min-height:40px;
  padding:9px 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:9px;
  background:var(--primary-dark);
  color:#fff;
  font-size:11px;
  font-weight:600;
  cursor:pointer
}

.back{
  color:var(--primary);
  font-size:12px;
  font-weight:600
}

.master-row{
  padding:11px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #EEF1F5
}

.master-row:last-child{
  border:0
}

.master-row>a:first-child,
.master-row b{
  font-size:12px;
  font-weight:600
}

.mini{
  margin-left:8px;
  color:var(--primary);
  font-size:10px;
  font-weight:600
}

.mini.danger{
  color:var(--danger)
}

.plain-form{
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important
}

.plain-form input{
  width:100%;
  min-height:44px;
  margin-bottom:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  outline:0
}

.plain-form input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(21,58,91,.09)
}

.plain-form .btn{
  width:100%;
  margin-top:10px
}

.prices{
  margin-top:3px;
  color:var(--muted);
  font-size:10px
}

@media(max-width:900px){

  .sa-header{
    height:78px;
    padding:0 22px
  }

  .sa-bos-logo{
    height:84px;
    transform:translateX(-5px)
  }

  .sa-brand{
    gap:13px
  }

  main{
    width:min(760px,calc(100% - 32px));
    grid-template-columns:1fr;
    column-gap:0;
    padding:26px 0 36px
  }

  main>.card:nth-of-type(1),
  main>.card:nth-of-type(2),
  main>.card:nth-of-type(3),
  .total-card,
  .master-link{
    grid-column:1
  }

  .card{
    margin-bottom:14px
  }

}

@media(max-width:700px){

  .sa-header{
    height:68px;
    padding:0 14px
  }

  .sa-bos-logo{
    height:76px
  }

  .sa-brand{
    gap:9px
  }

  .sa-divider{
    height:30px
  }

  .sa-title{
    font-size:16px
  }

  .sa-subtitle{
    font-size:8px;
    margin-top:3px
  }

  .sa-status{
    padding:5px 8px;
    font-size:8px
  }

  main{
    width:calc(100% - 24px);
    padding:20px 0 30px
  }

  main>h1{
    font-size:25px
  }

  main>.muted{
    font-size:12px
  }

  .card{
    padding:15px
  }

  .seg a,
  .categories a{
    min-height:44px
  }

  .section-title{
    font-size:18px
  }

  .item{
    font-size:11px
  }

  .item strong{
    font-size:11px
  }
}

@media(max-width:480px){

  .categories{
    grid-template-columns:1fr
  }

  .sa-divider{
    display:none
  }

  .sa-title-wrap{
    margin-left:1px
  }

  .sa-status{
    display:none
  }

  main{
    width:calc(100% - 20px)
    
  }

  .card{
    padding:13px
  }

  .item{
    align-items:flex-start
  }

  .item span{
    padding-right:6px
  }

  .master-head,
  .section-head{
    align-items:flex-start
  }
}


/* MASTER - MOBILE */
@media(max-width:900px){

    .master-page main{
        width:calc(100% - 24px);
        display:block;
    }

    .master-page .master-head{
        width:100%;
        margin-bottom:14px;
    }

    .master-page main > .card{
        width:100%;
        margin-bottom:14px;
    }

    .master-page .section-head{
        align-items:center;
    }

    .master-page .small-btn{
        min-height:40px;
        padding:9px 12px;
        white-space:nowrap;
    }

    .master-page .master-row{
        min-height:52px;
        padding:12px 0;
    }

    .master-page .master-row > div:last-child{
        display:flex;
        align-items:center;
        gap:8px;
        flex-wrap:wrap;
        justify-content:flex-end;
    }

    .master-page .mini{
        margin-left:0;
        font-size:10px;
    }
}