.card { 
    border: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    background-color: rgb(11,21,26);
    border-radius: 10px;
}

.card { min-height: 500px; }

#bg-canvas {
    background-color: black;
    background-image: url('../img/bg_1000x667.webp');
    background-size: cover;
    background-blend-mode: normal;
}

.wizard-step { 
    display: none;
    height: 100%;
    margin-top: 5px;
    }

.wizard-step.active { 
    display: block;
    }
    
/* Subtle wizard page transition */
@keyframes wizardEnter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
.wizard-step.active:not(#s15) {
    animation: wizardEnter 0.22s ease-out both;
}
*/

.wizard-step.active:not(#s0):not(#s1):not(#s15) {
    animation: wizardEnter 0.22s ease-out both;
}


/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
    .wizard-step.active {
        animation: none !important;
    }
}

#center-block { background-color: transparent!important; }

.progress {
    height:10px;
    border-radius: 999px;
    background:rgba(255,255,255,.2)
    }

.step-badge {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
    }

#navBack { border: none; }

#prev { color: #fff; }
#prev:hover { opacity: 0.5; }

input[type="radio"] {
    width: 1.4rem;
    height: 1.4rem;
    margin: 2px 10px 0 0;
    transform: translateX(-0.1em);
    }

.form-control { 
    width: 300px; 
    margin: 0 auto; 
    height: 50px; 
    font-size: 1rem; 
    }
    
.extended { width: 400px; }

hr { height: 1px; background-color: #fff; border: none; visibility: hidden; }

.form-control::placeholder {
    color: #888;
    opacity: 0.7;
    font-size: 16px;
    }

.form-label { font-size: .8rem; }

.form-label-small { 
    text-align: right; 
    font-size: .8rem; 
    width: 90px; 
    color: #fff; 
    }
    
.form-control-small { 
    width: 300px; 
    margin: 0 0 0 10px; 
    height: 25px; 
    font-size: .9rem; 
    padding-left: 10px;
    border-radius: 6px; 
    }

.form-check-label { font-size: 1.1rem; padding: 0; }

.form-check-input:checked {
    background-color: green;
    border-color: green;
    }

#business_address_fields tr td,
#customer_address_fields tr td { padding-bottom: 10px; }

.img-02 { width: 140px; height: auto; }

#w_code { font-size: .6rem; }

/* Custom Form Help Icon Super-script Utility */
.label-help-icon {
    position: relative;
    top: -2px; /* Precise layout lift height */
    cursor: help;
    display: inline-block;
    line-height: 1;
    }

.label-help-icon svg {
    width: 12px !important;
    height: 12px !important;
    margin-left: 0.25rem; /* Replaces ms-1 */
    transition: opacity 0.15s ease-in-out;
    }

/* Optional hover state to signal interactivity */
.label-help-icon:hover svg {
    opacity: 0.8;
    }

/* Mimics Bootstrap's placeholder opacity when no real value is chosen */
select.form-control:required:invalid {
    background-color: rgb(0, 0, 0);
    color: rgb(17, 19, 21); /* The solid equivalent of your 50% transparent colour over black */
}

/* Full opacity once a real option is picked */
select.form-control:valid {
    color: rgba(33, 37, 41, 1);
    }

.letter { 
    line-height: 1.2; 
    text-align: justify; 
    text-justify: inter-word; 
    }

.lead { font-size: 1.2rem; }

#welcome-sub { display: none; }

#btnStart { 
    padding: 8px 20px;
    font-size: 1rem;
    font-weight: 600;
    background-color: navy; 
    color: #fff; 
    margin-bottom: 15px; 
    z-index: 100;
    }

.btn01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 10px;
    color: navy;
    background: #ddd;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 500;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
    }

.btn01:hover {
   opacity: 0.5;
    transform: translateY(-1px);
    }

.btn01:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
    }
    
#generatePdf {  background-color: green; color: #fff; }

h2 { display: none }

.nav-butt {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 0 40px; 
    margin-bottom: 20px;
    }

.fa.picker-01 {
    opacity: 0.3; 
    color: black; 
    margin-top: 38px; 
    padding-top: 9px; 
    padding-left: 20px;
    font-size: 20px; 
    }
    
.fa.picker-02 {
    opacity: 0.3; 
    color: black; 
    margin-top: 9px; 
    padding-top: 9px; 
    padding-left: 20px;
    font-size: 20px; 
    }

/* Test CSS from s13 */

#itemsContainer .item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    position: relative;
    }

#itemsContainer .remove-item {
    position: static;
    cursor: pointer;
    }

/* Prevent layout shift when invalid-feedback appears/disappears */
.invalid-feedback { min-height: 1rem; }

/*
.invalid-feedback {
    display: block;
    visibility: hidden;
    height: 1rem;
}
 */
 
#inv_date,
#due_date,
#tax_point {
    text-align: left;
    padding-top: 10px;
    padding-left: 15px;
    }

.dur-message-01 { 
    font-size: 1.4rem; 
    line-height: 1; 
    font-weight: 700; 
    color: white; }
    
.dur-message-02 { display: none; }

.dur-msg-01 {
    width: 100%;
    margin-top: 10px;
    font-size: .8rem; 
    font-weight: 500; 
    color: white;
    line-height: 0.8;
    display: block;
    }
    
.dur-msg-02 { display: none; }

#businessAutocomplete,
#customerAutocomplete { margin: 0 auto; max-width: 400px; }

#s1 .invalid-feedback { 
    font-size: 1rem;
    font-weight: 500;
    text-align: center; 
    margin: 185px 0 0 0;
    }
    
#s6 .vat-check {
    font-size: 1rem;
    font-weight: 500;
    text-align: center; 
    margin: -80px 0 0 0;
    }

#s7 .error-message { 
    font-size: .8rem; 
    font-weight: 600; 
    color: indianred; 
    margin-top: 5px; 
    }

#introLoaderBar {
  transition: width 3s linear;
    }

.busy-overlay {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.65);
    z-index: 2000; /* above card */
    }

.busy-overlay .busy-card {
    background: rgba(20,20,30,.95);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    min-width: 260px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    }

/* Allow the s13 line item section to use available width */
#s13 .name-wrapper,
#s13 .form-section,
#s13 .items-table {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    }

/* Identical grid for headings AND rows */
#s13 .items-header,
#s13 #itemsContainer .item-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 2.0fr)
        75px
        95px
        65px
        90px
        35px;

    column-gap: 8px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    }

/* Heading labels */
#s13 .items-header {
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding-bottom: 8px;
    }

/* Each column must be allowed to shrink */
#s13 .item-col {
    min-width: 0;
    width: auto;
    }

/* Override existing wizard input styles */
#s13 .item-row input,
#s13 .item-row select {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: 42px;
    margin: 0 !important;
    padding: 6px 8px;
    box-sizing: border-box;
    font-size: 14px;
    color: #222;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    }

/* Amount */
#s13 .item-amount {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    }

/* Delete button */
#s13 .remove-item {
    position: static !important;
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: #dc3545;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    }

/* Add item controls */
#s13 .items-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    }

#s13 #addItem {
    background: #198754;
    color: white;
    padding: 8px 15px;
    }

#s13 #itemLimitMessage {
    color: #ddd;
    font-size: 12px;
    }

/* s15 Invoice Preview */
#s15 {
    height: auto !important;
    min-height: 74vh;
    }

#s15 .invoice-preview-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 10px 0 25px;
    }

/* Preserve original invoice dimensions */
#s15 .invoice-paper {
    width: 794px;
    max-width: none;
    min-height: 1100px;
    background: #ffffff;
    color: #333333;
    box-sizing: border-box;
    }

/* Protect invoice content from
   the dark wizard's generic styles */
#s15 .invoice-paper h1,
#s15 .invoice-paper h2,
#s15 .invoice-paper h3,
#s15 .invoice-paper p,
#s15 .invoice-paper li,
#s15 .invoice-paper td { color: #333333; }

/* Invoice must not inherit wizard
   heading visibility rules */
#s15 .invoice-paper h1,
#s15 .invoice-paper h2,
#s15 .invoice-paper h3 { display: block; }

/* Preserve visible horizontal rules */
#s15 .invoice-paper hr { visibility: visible; }

/* s15 only — navigation follows invoice preview */
#wiz:has(#s15.active) #navNext {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 35px 10px 25px !important;
    padding-top: 15px;
    }

/* Extra breathing room below invoice */
#s15 .invoice-preview-scroll { margin-bottom: 25px; }

/* Google Places autocomplete — light theme BUSINESS */

#s3 #businessAutocomplete,
#s3 gmp-place-autocomplete {
    color-scheme: light;
    }

#s3 gmp-place-autocomplete::part(prediction-list) {
    background-color: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    }

#s3 gmp-place-autocomplete::part(prediction-item) {
    background-color: #ffffff;
    color: #222222;
    }

/* Google Places autocomplete — light theme CUSTOMER */

#s9 #businessAutocomplete,
#s9 gmp-place-autocomplete {
    color-scheme: light;
    }

#s9 gmp-place-autocomplete::part(prediction-list) {
    background-color: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

#s9 gmp-place-autocomplete::part(prediction-item) {
    background-color: #ffffff;
    color: #222222;
    }

/* Preserve multi-line UK addresses */
#previewCompanyAddress,
#previewClientAddress {
    white-space: pre-line;
    height: auto;
    min-height: 25px;
    }

/* ==========================================
   Small screen 768px and down
   ========================================== */

@media screen and (max-width: 767px) {
    
input, select, textarea {
  font-size: 16px;
}

.wiz { font-size: 16px; }

h2 { 
    font-size: 1.8rem!important; 
    line-height: 28px; 
    margin: 0 auto 35px; 
    max-width: 250px;
    }

.slogan01 { display: block }

.wizard-step { height: 380px; }

#btnStart { 
    padding: 8px 20px!important;
    margin-bottom: 20px!important;
    font-size: 0.8rem!important;
    }

.nav-butt { padding: 0 25px; }

#title-container { background-size: 250px 320px; }

.form-control { 
    width: 250px; 
    margin: 0 auto; 
    height: 50px; 
    font-size: 1rem; 
    }
    
.form-control::placeholder { font-size: 1rem; }

.extended { max-width: 330px; }

#s1 .name-wrapper { max-width: 350px!important; padding: 0 20px; }
#s1 .form-check { max-width: 300px!important; }

#s2 .extended { max-width: 320px!important; height: 48px!important; padding: 0 0 0 20px; }
#s2 .complet { padding-left: 20px;}

#s4 .extended ,
#s10 .extended { max-width: 250px!important; height: 35px!important; padding: 0 0 0 10px; }

#s5 .name-wrapper { max-width: 320px; padding: 0; }

#acct_email,
#acct_phone { width: 320px!important; height: 45px!important; padding: 0 0 0 10px; }

#cust_email,
#cust_phone { width: 320px!important; height: 45px!important; padding: 0 0 0 10px; }

#s7 .form-control { max-width: 320px!important; }
#s7 .error-message { 
    font-size: .7rem; 
    font-weight: 600; 
    color: indianred; 
    margin-top: 5px; 
    }

#s8 .form-control { max-width: 320px!important; }

#s9 .name-wrapper { max-width: 400px; padding: 0 12px; }
#s9 .extended { max-width: 320px; }

.img-02 { width: 120px; height: auto; }

.letter { line-height: 1.3; text-align: justify; text-justify: inter-word; }

#welcome-sub { display: inline-block; }

/* Mimics Bootstrap's placeholder opacity when no real value is chosen */
select.form-control:required:invalid {
    color: rgba(33, 37, 41, 0.5); /* matches Bootstrap's placeholder colour */
    }

/* Full opacity once a real option is picked */
select.form-control:valid {
    color: rgba(33, 37, 41, 1);
    }

input[type="text"] {
    display: block;
    width: calc(100vw - 48px);
    max-width: 100%;
    height: 50px;
    padding: 0 8px 8px;
    box-sizing: border-box;
    }

input[type="date"] {
    display: block;
    width: calc(100vw - 48px);
    max-width: 100%;
    height: 50px;
    /*padding: 8px 12px;*/
    box-sizing: border-box;
    }
    
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    padding: 2px 0 3px;
    /*padding-top: 8px;
    padding-left: 5px;*/
    }

#businessAutocomplete,
#customerAutocomplete { margin: 0 auto; max-width: 322px; height: 50px; }

.dur-message-01 { display: none; }
.dur-message-02 { display: block; font-size: 1.5rem; line-height: .9; font-weight: 700; color: white; letter-spacing: 1px; }

.dur-msg-01 { display: none; }
    
.dur-msg-02 {
    width: 100%;
    margin-top: 5px;
    padding: 0;
    font-size: .7rem; 
    font-weight: 500; 
    color: white;
    line-height: 1.2;
    letter-spacing: 0.5px;
    display: block;
    }

/* Allow s13 to grow vertically */
#s13 {
    height: auto !important;
    min-height: 380px;
    padding-bottom: 30px;
    }

#s13 .name-wrapper,
#s13 .form-section,
#s13 .items-table,
#s13 #itemsContainer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    }

/* No desktop column headings on mobile */
#s13 .items-header { display: none !important; }

/* Each invoice item becomes a card */
#s13 #itemsContainer .item-row {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 12px;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 15px 0;
    padding: 15px;
    background: #263740;
    border: 1px solid #53636c;
    border-radius: 10px;
    }

/* Prevent the existing desktop widths
   from affecting individual fields */
#s13 .item-row .item-col {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    }

/* Description occupies full width */
/* Keep the description label and input clear */
#s13 .item-row .description {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-top: 0;
    padding-right: 0;
    }

/* Reserve a separate visual strip for the label */
#s13 .item-row .description::before {
    display: block;
    height: 26px;
    line-height: 20px;
    margin-bottom: 5px;
    }

/* Quantity / Unit price / VAT / Line total */
#s13 .item-row .quantity { grid-column: 1; }
#s13 .item-row .price { grid-column: 2; }
#s13 .item-row .tax { grid-column: 1; }
#s13 .item-row .amount { grid-column: 2; }

/* Delete button */
#s13 .item-row .action {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: 24px !important;
    height: 24px;
    margin-top: -1px;
    z-index: 2;
    }

/* Field labels generated by CSS */
#s13 .item-row .item-col::before {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    }
    
#s13 .item-row .description::before { padding-right: 35px; }

#s13 .description::before { content: "Description"; }
#s13 .quantity::before { content: "Quantity"; }
#s13 .price::before { content: "Unit price (£)"; }
#s13 .tax::before { content: "VAT"; }
#s13 .amount::before { content: "Line total"; }

/* Inputs */
#s13 .item-row input,
#s13 .item-row select {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: 44px;
    margin: 0 !important;
    padding: 8px;
    font-size: 16px;
    color: #222;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Amount display */
#s13 .item-amount {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/* Delete button */
#s13 .remove-item {
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 20px !important;
    min-width: 24px;
    min-height: 20px;
    padding: 0 0 4px 0 !important;
    margin: 0;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    }
    
#s13 .remove-item:hover { opacity: 0.7; }
    
/* Add Item area */
#s13 .items-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 15px;
    }
    
#s13 #addItem { padding: 4px 15px; font-size: .7rem; font-weight: 700; }
#s13 #addItem:hover { opacity: 0.7; }
#s13 #itemLimitMessage {
    color: #ddd;
    font-size: 12px;
    }
    
/* Extra breathing room below s13 line items */
#s13 {
    height: auto !important;
    min-height: 380px;
    padding-bottom: 60px !important;
    }

#s15 {
    height: auto !important;
    min-height: 380px;
    padding-bottom: 50px !important;
    }
 
#s16 {
    height: auto !important;
    min-height: 400px;
    padding-bottom: 60px !important;
    }   
    
}