/* Icelandic subpages in the 2026 layout: CMS pages, the application flow and
   login. Loaded after Bootstrap 4 and brand.css; restyles Bootstrap components
   to the brand instead of replacing their markup (custom.js depends on it).
   Polish pages still use custom.css. */

/* Layout ---------------------------------------------------------------- */

/* Match Bootstrap's container to the header's .wrap so edges line up. */
.container{max-width:1140px;padding-left:24px;padding-right:24px}

#content{padding-bottom:88px}

.page-hero{background:linear-gradient(160deg,var(--prussian) 0%,#03405e 62%,#065a80 100%);color:#fff;position:relative;overflow:hidden;margin-bottom:56px}
.page-hero::after{content:"";position:absolute;right:-160px;top:-260px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(33,158,188,.25),transparent 70%)}
.page-hero .wrap{position:relative;z-index:1;padding-top:56px;padding-bottom:60px}
.page-hero h1{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:0;color:#fff}

/* Typography ------------------------------------------------------------- */

a:hover{color:var(--prussian)}
h1,h2,h3,h4,h5,h6{font-family:'Satoshi',sans-serif;color:var(--prussian);font-weight:700;letter-spacing:-.015em;line-height:1.25}
/* Rich text from CMS blocks */
.block-row h2{font-size:1.6rem;margin:32px 0 14px}
.block-row h3{font-size:1.3rem;margin:28px 0 10px}
.block-row h4,.block-row h5{font-size:1.1rem;margin:24px 0 8px}
.block-row p,.block-row li{color:var(--slate)}
.block-row [class*="col"]>:first-child{margin-top:0}
.text-muted{color:var(--muted) !important}
hr{border-top-color:var(--line)}

/* Buttons ---------------------------------------------------------------- */

.btn{padding:12px 24px;font-size:1rem;border-radius:8px}
.btn:focus,.btn.focus{box-shadow:0 0 0 3px rgba(33,158,188,.35)}
.btn.disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.btn-primary,.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active{background:var(--gold);color:var(--prussian);box-shadow:0 4px 14px rgba(255,183,3,.35)}
.btn-primary:hover,.btn-primary:focus{background:#ffc52e;color:var(--prussian)}
.btn-primary.disabled,.btn-primary:disabled{background:var(--gold);color:var(--prussian)}
.btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 3px rgba(33,158,188,.35)}

.btn-outline-primary,.btn-secondary,
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled):active{background:transparent;border:2px solid var(--prussian);color:var(--prussian)}
.btn-outline-primary:hover,.btn-secondary:hover{background:var(--prussian);border-color:var(--prussian);color:#fff}

/* Forms ------------------------------------------------------------------ */

label,.col-form-label{font-family:'Satoshi',sans-serif;font-weight:600;color:var(--slate)}
.col-form-label{padding-top:12px;padding-bottom:12px;font-size:.95rem;line-height:1.5}
.form-control{height:auto;padding:11px 12px;font-size:1rem;line-height:1.5;color:var(--indigo);background-color:#fff;border:1px solid var(--line);border-radius:8px}
.form-control:focus{border-color:var(--baltic);box-shadow:0 0 0 3px rgba(33,158,188,.18)}
.form-control:disabled,.form-control[readonly]{background-color:var(--ice)}
.form-text{font-size:.85rem}
.form-check-label{font-weight:600}
.custom-file,.custom-file-input{height:48px}
.custom-file-label{height:48px;padding:11px 12px;line-height:1.5;border:1px solid var(--line);border-radius:8px;color:var(--muted)}
.custom-file-label::after{height:auto;padding:11px 14px;line-height:1.5;background:var(--ice);color:var(--prussian);font-family:'Satoshi',sans-serif;font-weight:600;border-radius:0 8px 8px 0}
.custom-file:lang(is) .custom-file-label::after{content:"Velja skrár"}
.custom-file-input:focus~.custom-file-label{border-color:var(--baltic);box-shadow:0 0 0 3px rgba(33,158,188,.18)}

/* select2 (airport pickers) and bootstrap-datepicker. Their stylesheets load
   after this one (application_page.html extra_head), hence the extra `body`. */
body .select2-container{width:100% !important}
body .select2-container--default .select2-selection--single{height:48px;padding:0 4px;border:1px solid var(--line);border-radius:8px}
body .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--indigo);line-height:46px}
body .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--muted)}
body .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;right:8px}
body .select2-container--default.select2-container--focus .select2-selection--single,
body .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--baltic)}
body .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--baltic)}
body .select2-dropdown{border-color:var(--line);border-radius:8px;overflow:hidden}
input.datepicker.form-control{padding:11px 12px;border-radius:8px;direction:ltr}

/* The file input's wrapper also carries .row; drop the row gutters so it lines up. */
.application .custom-file.row{margin-left:0;margin-right:0}

/* Alerts, modals, tabs --------------------------------------------------- */

.alert{border-radius:12px;padding:18px 22px}
.alert-light{background:#fff;border:1px solid var(--line);color:var(--slate)}
.alert-light h5{font-family:'Satoshi',sans-serif;font-weight:700;color:var(--prussian)}
.alert-info{background:#E8F4F9;border-color:#CBE6F1;color:var(--prussian)}

.modal-dialog{max-width:800px}
.modal-content{border:none;border-radius:16px;box-shadow:0 24px 60px rgba(2,48,71,.35)}
.modal-header,.modal-footer{border-color:var(--line);padding:18px 26px}
.modal-body{padding:22px 26px}
.modal-title{font-family:'Satoshi',sans-serif;font-weight:700;color:var(--prussian)}

.nav-tabs{border-bottom:2px solid var(--line);gap:24px}
.nav-tabs .nav-link{border:none;border-bottom:2px solid transparent;margin-bottom:-2px;padding:10px 2px;background:none;color:var(--muted);font-family:'Satoshi',sans-serif;font-weight:600}
.nav-tabs .nav-link:hover{color:var(--prussian)}
.nav-tabs .nav-link.active{background:none;color:var(--prussian);border-bottom-color:var(--gold)}

/* Application flow ------------------------------------------------------- */

.application h2{font-size:1.4rem;margin:8px 0 18px}
.control-label{width:100%}
.application li.active{font-weight:bold}
.passenger-line{line-height:2.5;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px}

/* Step indicator (flugbaetur/step_indicator.html) */
.pgb{margin-bottom:8px}
.pgb .step{text-align:center;position:relative;z-index:1}
.pgb .step p{position:absolute;width:100%;height:44px;line-height:44px;margin:0;text-align:center;z-index:3;font-family:'Satoshi',sans-serif;font-weight:800;font-size:1rem;color:var(--muted)}
.pgb .complete.step p{color:#fff}
.pgb .active.step p{color:var(--prussian)}
.pgb .img-circle{display:inline-block;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.pgb .complete .img-circle{background:var(--baltic);border-color:var(--baltic)}
.pgb .active .img-circle{background:var(--gold);border-color:var(--gold)}
.pgb .step .img-circle::before,.pgb .step .img-circle::after{content:"";display:block;background:var(--line);height:2px;width:50%;position:absolute;bottom:50%;z-index:-1}
.pgb .step .img-circle::before{left:0}
.pgb .step .img-circle::after{left:50%}
.pgb .step.complete .img-circle::after,.pgb .step.complete .img-circle::before,.pgb .step.active .img-circle::before{background:var(--baltic)}
.pgb .step:last-of-type .img-circle::after,.pgb .step:first-of-type .img-circle::before{display:none}
.pgb h2{font-size:1rem;margin:12px 0 4px;color:var(--muted)}
.pgb p{font-size:.85rem;color:var(--muted);line-height:1.4}
.pgb .active h2{color:var(--prussian)}
/* Phones: four labels don't fit, so show only the current step's label. */
@media(max-width:767px){
  .pgb .col:not(.step){display:none}
  .pgb .col.active:not(.step){display:block;flex:0 0 100%;max-width:100%}
}

/* Claim transfer signing (proxy_page.html, claim_transfer_signing.html) */
.proxy iframe{border:none;width:100%;min-height:80vh;border-radius:14px;background:#fff;box-shadow:0 8px 28px rgba(2,48,71,.07)}

/* Login (dokobit/login.html) */
.login{padding-left:24px;padding-right:24px}
.login .row{margin-left:0;margin-right:0}
.login .row>[class*="col-"]{flex:0 0 100%;max-width:520px;padding:0}
.login .login-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 30px 20px;box-shadow:0 8px 28px rgba(2,48,71,.07)}
.login .input-group>.form-control{border-radius:8px 0 0 8px}
.login .input-group-append .btn{border-radius:0 8px 8px 0}
/* "Innskrá" is the page's main action, so it gets the gold treatment. */
.login .input-group-append .btn-outline-primary,.login .input-group-append .btn-outline-primary:hover{background:var(--gold);border:none;color:var(--prussian)}
#errors .alert,#code{margin-top:12px}

@media(max-width:920px){
  .page-hero .wrap{padding-top:40px;padding-bottom:44px}
  .page-hero{margin-bottom:40px}
}
@media(max-width:575px){
  .login .login-card{padding:22px 20px 14px}
  .nav-tabs{gap:12px}
  .nav-tabs .nav-link{flex:1 1 0;text-align:center}
}