body {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Halványabb, sárgásabb-zöld kockás háttér */
    background-color: #f7f9f2; 
    background-image: 
        linear-gradient(rgba(180, 200, 160, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 200, 160, 0.08) 1px, transparent 1px);
    background-size: 25px 25px;
    color: #1e293b;
}

button,
input,
select,
textarea {
    font-family: inherit !important;
    /* font-size: inherit !important; */
}

* { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }

/* Header és Folyamatjelző visszaállítása a szebb változatra */
.header-container {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 15px 40px;
    border-bottom: 1px solid #e2e8f0;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.brand-section { display: flex; align-items: center; gap: 15px; }
.brand-logo { height: 45px; width: auto; }
.brand-name { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin: 0; }

.progress-nav { position: relative; flex-grow: 1; max-width: 700px; margin: 0 40px; }
.progress-line { position: absolute; top: 20px; left: 30px; right: 30px; height: 2px; background: #e2e8f0; z-index: 0; }
.progress-bar { display: flex; justify-content: space-between; position: relative; z-index: 1; }

.step-box {
    width: 40px; height: 40px;
    background: #475569; color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; border-radius: 8px; /* Kicsit kerekített négyzet */
    margin: 0 auto 8px; border: 2px solid #fff;
    transition: 0.3s;
}

.progress-step.active .step-box { background: #F06C02; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }
.step-title { font-size: 0.75rem; font-weight: 700; text-align: center; color: #64748b; }
.progress-step.active .step-title { color: #1e293b; }

/* Grid és szimmetria */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Szimmetrikus 50-50% */
    gap: 30px;
    flex: 1;
    align-items: start;
}

.content-box {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
    position: relative;
    border: 1px solid rgba(226, 232, 240, 0.8);
    height: 100%; /* Hogy egyforma magasak legyenek ha lehet */
}

/* Help gomb */
.help-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #cbd5e0;
    background: #f8fafc;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    transition: 0.2s;
}
.help-btn:hover { background: #F06C02; color: white; border-color: #F06C02; }

/* Upload & Form */
.file-input {
    border: 2px dashed #cbd5e0;
    border-radius: 10px;
    padding: 5px 5px;
    text-align: center;
    background: #fafafa;
    transition: 0.3s;
    font-size: 10px;
	cursor:pointer!important;
}
.file-input:hover { border-color: #F06C02; background: #f0f7ff; }
.upload-icon { font-size: 2rem; color: #F06C02; margin-bottom: 10px; }

/* Drop zone itself */
.file-drop-zone{
    margin: 0 !important;
    border: 0px !important;
    padding: 24px 16px !important;
    min-height: 140px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The inner title container (this is what makes it tall by default) */
.file-drop-zone-title{
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4;
    font-size: 14px;
	color: #1e293b;
}

/* Icon spacing */
.file-drop-zone-title .upload-icon{
    display: block;
    font-size: 28px;
    margin-bottom: 8px;
}

/* Remove ALL preview-related borders/spacers */
.file-preview,
.file-preview-frame,
.file-preview-thumbnails,
.krajee-default.file-preview-frame{
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.file-drop-zone-message,
.file-drop-zone .help-block,
.file-drop-zone-title small {
    display: none !important;
}


.file-actions,
.file-footer-buttons,
.kv-file-upload,
.kv-file-zoom,
.kv-file-remove,
.kv-file-download {
  display: none !important;
}

.file-footer,
.file-footer-caption {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/*
.file-preview-frame {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 auto !important;
    float: none !important;
    text-align: center;
}
*/




/* 1) Stop the big centered flex layout */
.file-drop-zone{
    display: block !important;      /* was flex */
    min-height: 0 !important;       /* remove forced height */
    padding: 12px 16px !important;  /* compact padding */
}

/* 2) Make the thumbnails container a vertical list */
.file-preview-thumbnails{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* 3) Each file row: compact, left-aligned */
.file-preview-frame{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    float: none !important;
}

/* 4) Caption: keep it tight */
.file-footer,
.file-footer-caption{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* 5) Hide the action buttons */
.file-actions,
.file-footer-buttons,
.kv-file-upload,
.kv-file-zoom,
.kv-file-remove,
.kv-file-download{
    display: none !important;
}






/* Drop zone: no forced height */
.file-drop-zone{
  min-height: 0 !important;
  padding: 12px 16px !important;
}

/* Thumbnails container: vertical list, no extra space */
.file-preview-thumbnails{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each item: kill the "tile" dimensions */
.file-preview-frame{
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;

  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Icon area: remove fixed thumbnail box */
.kv-file-content{
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer: remove fixed heights and empty bars */
.file-footer{
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Caption: no truncation chrome / no reserved space */
.file-footer-caption{
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  line-height: 1.2 !important;
}

/* Remove action area entirely (often reserves width/height even when hidden) */
.file-actions,
.file-footer-buttons{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.file-preview{
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Override Krajee's inline width/height for "other" previews */
.kv-preview-data.file-preview-other-frame{
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Also neutralize the inner wrapper that can carry spacing */
.file-preview-other,
.file-other-icon{
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}




/* Each item row: icon + text */
.file-preview-frame{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Icon wrapper (your SVG lives in here) */
.kv-file-content,
.kv-preview-data.file-preview-other-frame{
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

/* Text block: center vertically next to icon */
.file-footer{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}





/* MUST be after krajee's CSS */
.krajee-default.file-preview-frame .file-thumbnail-footer{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;

  /* center caption vertically in whatever space remains */
  display: flex !important;
  align-items: center !important;
}

/* Ensure the frame itself is a row */
.krajee-default.file-preview-frame{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Kill the “other preview” fixed box too (some builds set this inline) */
.kv-preview-data.file-preview-other-frame{
  width: auto !important;
  height: auto !important;
}




.file-preview-thumbnails{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;  /* 2 columns */
  gap: 12px 24px !important;                  /* row gap, col gap */
  align-items: start !important;
}

/* ensure each item fills its grid cell nicely */
.file-preview-frame{
  width: 100% !important;
}




/*
.file-footer-caption,
.file-footer-caption *{
  max-width: none !important;
  width: auto !important;

  white-space: normal !important; 
  overflow: visible !important;
  text-overflow: clip !important;
}
*/


/* Keep the icon block visible and sized */
.krajee-default.file-preview-frame .kv-file-content,
.krajee-default.file-preview-frame .file-preview-other,
.krajee-default.file-preview-frame .file-other-icon,
.krajee-default.file-preview-frame .kv-preview-data.file-preview-other-frame {
  display: block !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Remove truncation ONLY for the preview filename (multi-line) */
.krajee-default.file-preview-frame .file-footer-caption,
.krajee-default.file-preview-frame .file-footer-caption .file-caption-info,
.krajee-default.file-preview-frame .file-footer-caption .file-caption-name {
  white-space: normal !important;        /* allow multiple lines */
  overflow: visible !important;          /* no clipping */
  text-overflow: clip !important;        /* no ellipsis */
  max-width: none !important;
  width: auto !important;
  word-break: break-word !important;     /* break long chunks */
}

/* Some themes apply overflow hidden on the footer wrapper */
.krajee-default.file-preview-frame .file-thumbnail-footer,
.krajee-default.file-preview-frame .file-footer {
  overflow: visible !important;
  height: auto !important;
}




/* Hide the file size text in the preview caption */
.krajee-default.file-preview-frame .file-size-info,
.krajee-default.file-preview-frame .file-size-info *,
.krajee-default.file-preview-frame .file-caption-info .file-size-info {
  display: none !important;
}





/* Icon column must never shrink */
.krajee-default.file-preview-frame .kv-file-content,
.krajee-default.file-preview-frame .kv-preview-data.file-preview-other-frame,
.krajee-default.file-preview-frame .file-preview-other,
.krajee-default.file-preview-frame .file-other-icon{
  flex: 0 0 48px !important;   /* fixed column */
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
}

/* Keep the SVG itself at a fixed size */
.krajee-default.file-preview-frame .file-other-icon svg{
  width: 36px !important;
  height: 36px !important;
  display: block !important;
}




/* force the footer/caption out of any absolute positioning + center it */
.file-preview-frame .file-thumbnail-footer,
.file-preview-frame .file-footer,
.file-preview-frame .file-footer-caption,
.file-preview-frame .file-caption-info,
.file-preview-frame .file-caption-name{
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;

  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* make the whole item a row + vertical-center */
.file-preview-frame{
  display: flex !important;
  align-items: center !important;
}

/* center the text block vertically */
.file-preview-frame .file-thumbnail-footer,
.file-preview-frame .file-footer,
.file-preview-frame .file-footer-caption{
  display: flex !important;
  align-items: center !important;
}

/* keep your icon fixed */
.file-preview-frame .kv-preview-data.file-preview-other-frame,
.file-preview-frame .file-other-icon{
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

/* your svg size */
.file-preview-frame .file-other-icon svg{
  width: 36px !important;
  height: 36px !important;
  display: block !important;
}



#kvFileinputModal{
  display: none !important;
  position: fixed !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Prevent drop zone from shrinking when files are added */
.file-drop-zone{
  min-height: 135px !important;   /* adjust if needed */
}





.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #cbd5e0; border-radius: 6px; box-sizing: border-box; }
.form-group input[type="radio"],.form-group input[type="checkbox"] {width: auto; padding: 0;}

.btn-main { background: #F06C02; color: white; padding: 12px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-main:hover { background: #F06C02; color: white; }
.full-width { width: 100%; }

/* Header kiegészítők */
.header-actions { display: flex; gap: 12px; }
.btn-reg { background: #059669; color: white; border: none; padding: 10px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.lang-select { border: 1px solid #cbd5e0; border-radius: 6px; padding: 5px 10px; }

/* Lábléc */
footer {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 20px 0;
    margin-top: 50px;
}
.footer-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.footer-links a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.85rem;
    margin-right: 20px;
}
.footer-links a:hover { color: #F06C02; }
.copyright { font-size: 0.85rem; color: #94a3b8; }

.table-container {
    overflow-x: auto;
    margin-top: 10px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-table th {
    text-align: left;
    padding: 10px;
    background: #f8fafc;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
}

.data-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.status-ok {
    color: #059669;
    font-weight: bold;
}

/* Biztosítjuk, hogy a jobb és bal oszlop ne csússzon el */
.main-grid {
    align-items: flex-start;
}

/* Driver Selection Cards */
.driver-card {
    background: #fdfdfd;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 15px;
    transition: 0.2s;
}

.driver-card:hover {
    border-color: #F06C02;
    background: #fff;
}

.driver-info h3 { margin: 0; font-size: 1rem; color: #1e293b; }
.driver-info p { margin: 3px 0 10px 0; font-size: 0.8rem; color: #64748b; }

.month-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.month-btn {
    padding: 6px 12px;
    border: 1px solid #cbd5e0;
    background: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.month-btn:hover:not(.disabled) {
    background: #F06C02;
    color: white;
    border-color: #F06C02;
}

.month-btn.disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    border-style: dashed;
}

/* Cart Styling inside the Box */
.cart-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    /*max-height: 250px;
    overflow-y: auto;*/
}

.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

.cart-summary {
    margin: 20px 0;
    padding-top: 15px;
    border-top: 2px solid #f1f5f9;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.summary-line.total {
    font-weight: 800;
    font-size: 1.1rem;
    color: #F06C02;
    margin-top: 10px;
}

.nav-buttons-inline {
    margin-top: 10px;
}

.btn-sec {
    background: #f1f5f9;
    color: #475569;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Year Selection Style */
.year-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 10px;
}

.year-btn {
    padding: 8px 20px;
    border: 1px solid #cbd5e0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    color: #64748b;
}

.year-btn.active {
    background: #F06C02;
    color: white;
    border-color: #F06C02;
}

/* Compact Driver Card */
.driver-card.compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 8px;
}

.driver-header {
    font-size: 0.9rem;
    min-width: 150px;
}

.driver-header small {
    color: #94a3b8;
    display: block;
}

/* Align buttons like in the index page */
.action-footer {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-sec {
    background: #f1f5f9;
    color: #475569;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-sec:hover {
    background: #e2e8f0;
}

/* Compact Driver Row Layout */
.driver-row-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    gap: 15px;
}

.driver-meta {
    min-width: 120px;
}

.driver-meta strong { display: block; font-size: 0.9rem; }
.driver-meta small { color: #94a3b8; font-size: 0.75rem; }

.selection-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    justify-content: flex-end;
}

/* Mini Year Select */
.year-mini-select {
    padding: 4px 8px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #fff;
    font-weight: 600;
}

/* Mini Month Grid */
.month-grid-mini {
    display: flex;
    gap: 4px;
}

.month-btn-mini {
    padding: 4px 8px;
    font-size: 0.7rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.month-btn-mini:hover {
    border-color: #F06C02;
    color: #F06C02;
}

.month-btn-mini.active {
    background: #F06C02;
    color: white;
    border-color: #F06C02;
}

/* Action Footer for Buttons */
.action-footer {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

/* Summary Table Enhancements */
.btn-remove {
    background: #fee2e2;
    color: #ef4444;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.btn-remove:hover {
    background: #ef4444;
    color: white;
}

/* Detailed Price Breakdown */
.detailed-summary {
    margin-top: 10px;
}

.summary-hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 15px 0;
}

.total-large {
    font-size: 1.4rem;
    font-weight: 800;
    color: #F06C02;
}

.detailed-summary .summary-line {
    padding: 5px 0;
    font-size: 1rem;
}

/* Ensure info box stays aligned */
.info-box h3 {
    margin-top: 0;
    color: #1e293b;
    font-size: 1rem;
}

/* Payment Options Styling */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.payment-option:hover {
    border-color: #cbd5e0;
    background-color: #f8fafc;
}

.payment-option input[type="radio"] {
    margin-right: 15px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.option-details {
    flex-grow: 1;
}

.option-details strong {
    display: block;
    font-size: 1rem;
    color: #1e293b;
}

.option-details small {
    color: #64748b;
    font-size: 0.8rem;
}

.option-icons {
    font-size: 1.5rem;
    filter: grayscale(100%);
    opacity: 0.5;
}

.payment-option:has(input:checked) {
    border-color: #F06C02;
    background-color: #FFF3E8;
}

.payment-option:has(input:checked) .option-icons {
    filter: grayscale(0%);
    opacity: 1;
}
/* Form Layout */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #64748b;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    box-sizing: border-box;
}

.form-row {
    display: flex;
    gap: 15px;
}

.toggle-group {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.toggle-group label {
    font-weight: normal;
    color: #1e293b;
    cursor: pointer;
}

/* Checkbox Styling */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #64748b;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0; width: 0;
}

.checkmark {
    position: absolute;
    top: 0; left: 0;
    height: 18px; width: 18px;
    background-color: #eee;
    border-radius: 4px;
}

/* Draw the ✓ inside the custom checkbox */
.checkmark{
    position: absolute; /* keep */
}

.checkmark:after{
    content:"";
    position:absolute;
    display:none;

    left:6px;
    top:2px;
    width:5px;
    height:10px;

    border: solid #ffffff;
    border-width:0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container input:checked ~ .checkmark:after{
    display:block;
}

/* Payment page: force native checkbox (option 2) */
.checkbox-container.checkbox-native{
    padding-left: 0;           /* remove space reserved for .checkmark */
}

.checkbox-container.checkbox-native .checkmark{
    display: none !important;  /* in case any old markup remains */
}

.checkbox-container.checkbox-native input{
    position: static !important;
    opacity: 1 !important;
    height: 20px !important;
    width: 20px !important;
    margin: 0 10px 0 0 !important;
    cursor: pointer;
    accent-color: #F06C02;
}

.checkbox-container:hover input ~ .checkmark { background-color: #ccc; }
.checkbox-container input:checked ~ .checkmark { background-color: #F06C02; }

/* Payment Options (Repeated for context) */
.payment-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
.payment-option:has(input:checked) {
    border-color: #F06C02;
    background: #FFF3E8;
}

/* Results Page Specifics */
.result-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.action-icon-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    margin-left: 5px;
    transition: 0.2s;
}

.action-icon-btn:hover {
    background: #F06C02;
    color: white;
    border-color: #F06C02;
}

/* Success Message */
.success-message {
    text-align: center;
    padding: 10px 0;
}

.success-icon {
    width: 50px;
    height: 50px;
    background: #059669;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 15px;
}

.success-message h2 {
    margin-bottom: 10px;
    color: #059669;
}

.failure-message {
    text-align: center;
    padding: 18px 0 6px;
}

.failure-icon {
    width: 54px;
    height: 54px;
    background: #b91c1c;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    font-weight: 700;
    margin: 0 auto 18px;
}

.failure-message h2 {
    margin-bottom: 24px;
    color: #b91c1c;
    font-size: 1.8rem;
    line-height: 1.15;
}

.failure-message p {
    margin: 0 auto;
    max-width: 980px;
    text-align: left;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.45;
    margin-bottom: 12px;
}

.invoice-box h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.invoice-box p {
    font-size: 0.85rem;
    color: #64748b;
}


/* Processing Message */
.processing-message {
    text-align: center;
    padding: 30px 0 10px;
}

.processing-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 6px solid #e5e7eb;      /* light gray ring */
    border-top-color: #f97316;      /* orange arc */
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}




/* Bulk Action Buttons Alignment */
.bulk-actions {
    display: flex;
    gap: 10px;
}

/* Table Order Date Column Styling */
.data-table td {
    font-size: 0.85rem;
}

/* Processed (already sent/downloaded) icon state */
.action-icon-btn.processed {
    background: #ecfdf5;
    color: #059669;
    border-color: #10b981;
}

/* Result Table Row Transition */
.report-row {
    transition: opacity 0.3s ease;
}

/* Checkbox margin adjustment for results page */
.checkbox-container {
    user-select: none;
    display: inline-flex;
    align-items: center;
}


/*
#drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  max-width: 100%;
  height: 200px;
  padding: 1em;
  border: 1px solid #cccccc;
  border-radius: 4px;
  color: slategray;
  cursor: pointer;
}

#file-input {
  display: none;
}

#preview {
  width: 500px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  list-style: none;
  padding: 0;
}

#preview li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  width: 100%;
  height: 100px;
}

#preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
*/





.form-actions{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.form-actions .btn-main,
.form-actions .btn-sec{
  width:100%;
}

@media (min-width: 769px){
  .form-actions{
    flex-direction:row;
  }
  .form-actions .btn-main,
  .form-actions .btn-sec{
    flex:1;
    width:auto;
  }
}

.is-hidden { display: none !important; }




/* 1) Mobile header */
@media (max-width: 768px) {
  .header-container {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }

  .progress-nav {
    order: 3;            /* push below brand + actions */
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
  }

  .header-actions {
    order: 2;
  }

  .brand-section {
    order: 1;
  }

  /* Make the progress control smaller */
  .step-box { width: 32px; height: 32px; border-radius: 7px; }
  .step-title { font-size: 0.65rem; }
  .progress-line { top: 16px; left: 20px; right: 20px; }
}

/*
@media (max-width: 360px) {
  .step-title { display: none; }
}
*/

/* 2) Page container padding (you use class="container" in HTML but no CSS) */
.container {
  width: 100%;
  margin: 0;
  padding: 24px 40px;     /* or whatever you prefer */
  box-sizing: border-box;
  max-width: none;        /* this is the key */
}

/* 3) Main grid responsive */
@media (max-width: 768px) {
  .main-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .content-box {
    padding: 20px;
  }
	
  .date-range, .file-insights {
	min-width: 200px;
	}
}


.data-table { min-width: 520px; }


@media (max-width: 768px) {
  .data-table th, .data-table td { padding: 8px; }
  .data-table { font-size: 0.8rem; }
}

.column { min-width: 0; }
.content-box { min-width: 0; }

@media (max-width: 768px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}




.column > .content-box + .content-box {
  margin-top: 10px;
}

.column > .content-box.no-top-gap {
  margin-top: 0 !important;
}


$('#country').select2({
  width: '100%'
});

$.fn.select2.defaults.set('width', '100%');

.form-group > .select2-container {
  width: 100% !important;
}

.form-group .select2-container--default .select2-selection--single {
  height: auto;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.form-group .select2-container--default .select2-selection__rendered {
  padding: 0;
  line-height: normal;
  color: inherit;
}

.form-group .select2-container--default .select2-selection__arrow {
  height: 100%;
  right: 10px;
}

.registration-section .form-group > span.select2.select2-container {
  width: 100% !important;
}

.registration-section .select2-container--default .select2-selection--single {
  width: 100% !important;
  height: auto !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.registration-section .select2-container--default .select2-selection__rendered {
  padding: 0 !important;
  line-height: normal !important;
  font-size: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
}

.registration-section .form-actions {
	margin-top: 25px;
}

.registration-section .field-hint {
	color: #8191a6;
    display: block;
    text-align: right;
    margin-top: 6px;
    font-size: 0.8rem;
}

.registration-section .password-form-group-inner {
	margin-bottom: 3px !important;
}





/* ==== Select2 (country) – minimal unified styling ==== */

/* container width (needed because Select2 often sets inline width:auto) */
.registration-section .form-group > span.select2.select2-container,
.billing-section .form-group > span.select2.select2-container {
  width: 100% !important;
}

/* the visible control box */
.registration-section .select2-container--default .select2-selection--single,
.billing-section .select2-container--default .select2-selection--single {
  height: auto !important;
  padding: 12px 14px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;

  font-family: inherit !important;
  font-size: 13.3px !important;
  font-weight: 400 !important;
}

/* the visible text (selected value) */
.registration-section .select2-container--default .select2-selection__rendered,
.billing-section .select2-container--default .select2-selection__rendered {
  padding: 0 !important;
  line-height: normal !important;
  color: #757575 !important;
  opacity: 1 !important;

  font-family: inherit !important;
  font-size: 13.3px !important;
  font-weight: 400 !important;
}

/* placeholder text (when placeholder mode is actually active) */
.registration-section .select2-container--default .select2-selection__placeholder,
.billing-section .select2-container--default .select2-selection__placeholder {
  color: #757575 !important;

  font-family: inherit !important;
  font-size: 13.3px !important;
  font-weight: 400 !important;
}

/* dropdown options */
.registration-section .select2-container--default .select2-results__option,
.billing-section .select2-container--default .select2-results__option {
  font-family: inherit !important;
  font-size: 13.3px !important;
  font-weight: 400 !important;
  color: #757575 !important;
}



/* Match Select2 height to inputs */
.registration-section
.select2-container--default
.select2-selection--single {
  height: 38px !important;
  padding: 0 14px !important;   /* horizontal only */
  display: flex !important;
  align-items: center !important;
}
.billing-section
.select2-container--default
.select2-selection--single {
  height: 38px !important;
  padding: 0 14px !important;   /* horizontal only */
  display: flex !important;
  align-items: center !important;
}

.registration-section
.select2-container--default
.select2-selection__rendered {
  padding: 0 !important;
  line-height: 38px !important;
}
.billing-section
.select2-container--default
.select2-selection__rendered {
  padding: 0 !important;
  line-height: 38px !important;
}


/* Center Select2 caret vertically */
.registration-section
.select2-container--default
.select2-selection__arrow {
  height: 38px !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.billing-section
.select2-container--default
.select2-selection__arrow {
  height: 38px !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Match Select2 corner radius to inputs */
.registration-section
.select2-container--default
.select2-selection--single {
  border-radius: 6px !important;
}
.billing-section
.select2-container--default
.select2-selection--single {
  border-radius: 6px !important;
}

/* Also fix focus/open states (Select2 changes radius there) */
.registration-section
.select2-container--default.select2-container--open
.select2-selection--single,
.registration-section
.select2-container--default.select2-container--focus
.select2-selection--single {
  border-radius: 6px !important;
}
.billing-section
.select2-container--default.select2-container--open
.select2-selection--single,
.registration-section
.select2-container--default.select2-container--focus
.select2-selection--single {
  border-radius: 6px !important;
}

.select2-container--default .select2-dropdown .select2-results__option {
  font-size: 14px !important;
  font-weight: 400 !important;
}



/* Krajee FileInput: hide upload progress / status message bar ("Done") */
.file-preview-status,
.kv-upload-progress,
.file-upload-indicator {
    display: none !important;
}

.kv-file-status {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    z-index: 10;
}

.kv-status-working {
    color: #0d6efd; /* blue */
}

.kv-status-success {
    color: #28a745; /* green */
}

.kv-status-error {
    color: #dc3545; /* red */
}

.file-thumb-progress {
    display: none !important;
}

/* Give filename room so the icon doesn't overlap */
.file-caption-info,
.file-caption-name {
    padding-right: 28px !important;
}

/* Position upload status icon to the far right, vertically centered */
.file-upload-indicator {
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%);
}

/* Reserve space on the right INSIDE the caption area */
.file-input .file-caption {
    padding-right: 34px !important;
    position: relative;
}

/* Put the built-in checkmark in that reserved area */
.file-input .file-caption .file-upload-indicator {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.file-input .file-caption-info {
    padding-right: 34px !important;
}




/* ===== TABLE BASE ===== */
.processed-files-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Keep real table behavior */
.processed-files-table thead { display: table-header-group; }
.processed-files-table tbody { display: table-row-group; }
.processed-files-table tr    { display: table-row; }
.processed-files-table th,
.processed-files-table td    { display: table-cell; }

/* ===== HEADER ===== */
.processed-files-table thead th {
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #6b778c;
    background: #f8fafc;
    border-bottom: 2px solid #e4e9f2;
    text-align: left;
    white-space: nowrap;
}

/* ===== BODY ROWS ===== */
.processed-files-table tbody td {
    padding: 18px 18px;
    font-size: 14px;
    font-weight: 400;
    color: #1f2937;
    border-bottom: 1px solid #e8edf5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Bold name column (as in original design) */
.processed-files-table tbody td.pf-name strong {
    font-size: 15px;
    font-weight: 600;
    white-space: normal;
    overflow: visible;	
}

/* Status column */
.processed-files-table tbody td.pf-status {
    font-weight: 600;
    text-align: left;
    white-space: normal;
    word-break: break-word;
	line-height: 1.25;
}
.processed-files-table tbody td.pf-status.status-ok {
    color: #2f855a;
}
.processed-files-table tbody td.pf-status.status-error {
    color: #B54747;
}


/* ===== COLUMN WIDTHS (MATCH HEADER + BODY) ===== */
.processed-files-table th:nth-child(1),
.processed-files-table td:nth-child(1) { width: 14%; }

.processed-files-table th:nth-child(2),
.processed-files-table td:nth-child(2) { width: 34%; }

.processed-files-table th:nth-child(3),
.processed-files-table td:nth-child(3) { width: 18%; }

.processed-files-table th:nth-child(4),
.processed-files-table td:nth-child(4) { width: 22%; }

.processed-files-table th:nth-child(5),
.processed-files-table td:nth-child(5) { width: 12%; }

/*.processed-files-table tbody td.pf-status {
    font-weight: 600;
    color: #2f855a;
    text-align: left;
}*/

.processed-files-table tbody td.pf-filename {
    color: #6b7280;
	font-weight: 500;
	/*padding-left: 20px;*/
}

.processed-files-table tbody tr.pf-error-row,
.processed-files-table tbody tr.pf-error-row:hover {
	background: #fcfcfc !important;
}

/* ===== ROW ANIMATION ===== */
.processed-file-row.pf-row--enter {
    animation: pfRowEnter 220ms ease-out;
}

@keyframes pfRowEnter {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}







.upload-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

/* reduce vertical bulk */
.upload-actions .btn-main {
    padding: 12px 16px;
}

/* Reusable outline button */
.btn-outline {
    background: transparent;
    color: #F06C02;
    border: 2px solid #F06C02;
}

/* Hover / focus: same blue, white text */
.btn-outline:hover,
.btn-outline:focus {
    background: #F06C02;
    color: #ffffff;
    border-color: #F06C02;
}

/* Kill any theme darkening */
.btn-outline:hover:not(:disabled),
.btn-outline:focus:not(:disabled) {
    box-shadow: none;
    filter: none;
}

/* primary upload */
.btn-primary {
    background: #F06C02;
    color: #ffffff;
    border: 2px solid #F06C02;
}

/* footer layout */
.upload-actions-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* navigation-style button */
.btn-next {
    background: #f3f6ff;
    color: #1e2a3a;
    padding: 10px 18px;
}

/* mobile: stack, but keep order */
@media (max-width: 520px) {
    .upload-actions {
        grid-template-columns: 1fr;
    }
}


.file-input .btn-file,
.file-drop-zone .btn-file {
    display: none !important;
}



.file-input.file-input-ajax-new:hover{
    background:#FFF3E8;
}

.file-drop-zone:hover,
.file-drop-zone.file-drop-zone-active{
    background:#FFF3E8;
}



/*
.file-input.file-input-ajax-new.file-input-highlight{
    background:#FFF3E8;
}

.file-preview.drag-highlight{
    background:#FFF3E8;
}
*/





/* Disabled primary button */
.btn-primary.disabled,
.btn-primary:disabled {
    background: #F3D2B8;
    border-color: #F3D2B8;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 1;          /* prevent Bootstrap-style fading */
}

/* No hover / active effects when disabled */
.btn-primary.disabled:hover,
.btn-primary:disabled:hover,
.btn-primary.disabled:active,
.btn-primary:disabled:active,
.btn-primary.disabled:focus,
.btn-primary:disabled:focus {
    background: #F3D2B8;
    border-color: #F3D2B8;
    color: #ffffff;
    box-shadow: none;
}



/* Remove default focus ring for mouse interaction */
button:focus {
    outline: none;
}

/* Restore focus ring ONLY for keyboard users */
button:focus-visible {
    outline: 2px solid #F06C02;
    outline-offset: 2px;
}







.driver-row-compact {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid #eef2f7;
}

.driver-meta small {
    display: block;
    color: #8a94a6;
    margin-top: 2px;
}

.selected-summary {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #64748b;
}

.selection-controls {
    min-width: 340px;
}

.preset-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-small {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.95rem;
}

.month-picker-panel {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e8edf6;
    border-radius: 16px;
    background: #fff;
}

.picker-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.picker-year {
    font-weight: 800;
    font-size: 1rem;
    min-width: 84px;
    text-align: center;
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.month-chip {
    border: 1px solid #dbe4f2;
    border-radius: 12px;
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.month-chip.is-selected {
    background: #2f63e0;
    border-color: #2f63e0;
    color: #fff;
}

.month-chip.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.picker-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.picker-count {
    margin-left: auto;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
}

@media (max-width: 700px) {
    .driver-row-compact {
        flex-direction: column;
    }

    .selection-controls {
        width: 100%;
        min-width: 0;
    }

    .preset-row {
        justify-content: stretch;
    }

    .preset-row button {
        flex: 1 1 auto;
    }

    .picker-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Select Reports: smaller controls than the big action buttons */
.select-reports .btn-small {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.1;
    font-weight: 700;
}

.select-reports .preset-row {
    gap: 8px;
}

.select-reports .selected-summary {
    font-size: 0.8rem;
}



.select-reports .month-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.select-reports .month-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
}

.select-reports .month-modal-card {
    position: absolute;
    left: 50%;
    top: 12%;
    transform: translateX(-50%);
    width: min(680px, calc(100% - 28px));
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e8edf6;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    padding: 14px;
}

.select-reports .month-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
}

.select-reports .month-modal-title {
    font-weight: 900;
    font-size: 1rem;
}

.select-reports .month-modal-body .month-picker-panel {
    display: block !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Inline mode on mobile */
@media (max-width: 700px) {
    .select-reports .month-modal-card {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        border-radius: 18px 18px 0 0;
    }
}




.select-reports .picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .select-reports .picker-grid { grid-template-columns: repeat(3, 1fr); } }




.report-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* Select Reports: compact action buttons (same “scale” as your Next Step buttons) */
.select-reports .report-actions .btn-outline,
.select-reports .report-actions .btn-primary {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    line-height: 36px !important;
}

/* Keep outline hover from going “darker weird” */
.select-reports .report-actions .btn-outline:hover {
    background: #F06C02;
    color: #ffffff;
    border-color: #F06C02;
}

/* Primary hover stays consistent */
.select-reports .report-actions .btn-primary:hover {
    filter: brightness(0.95);
}

/* Mobile: even tighter */
@media (max-width: 640px) {
    .select-reports .report-actions .btn-outline,
    .select-reports .report-actions .btn-primary {
        height: 34px !important;
        line-height: 34px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
}

.select-reports-subtitle { font-size: 0.85rem; color: #64748b; margin-bottom: 20px; }
.driver-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid #e6edf7; }
.driver-meta strong { display: block; font-size: 1.15rem; }
.driver-meta small { display: block; color: #94a3b8; font-size: 0.95rem; margin-top: 2px; }
.report-summary { color: #64748b; font-size: 0.95rem; margin-top: 10px; }
.report-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 800px) { .driver-row { flex-direction: column; align-items: flex-start; gap: 14px; } .report-actions { justify-content: flex-start; } }






.select-reports-hint {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
}

.select-reports .driver-meta {
    min-width: 220px;
}

.select-reports .driver-meta strong {
    display: block;
    font-size: 1rem;
}

.select-reports .driver-meta small {
    display: block;
    color: #94a3b8;
    font-size: 0.85rem;
    margin-top: 2px;
}

.select-reports .driver-summary {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 10px;
}

.select-reports .report-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-primary {
    background: #F06C02;
    color: #ffffff;
    border: 2px solid #F06C02;
    cursor: pointer;
}

.btn-outline {
    background: transparent;
    color: #F06C02;
    border: 2px solid #F06C02;
    cursor: pointer;
}

/* Modal */
.months-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding-bottom: 10px;
}




.month-tile {
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    user-select: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    padding: 6px 8px;
}

.month-tile .mt-month {
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    color: #1e293b;
}

.month-tile .mt-year {
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    color: #94a3b8;
}

.month-tile:hover {
    border-color: #F06C02;
}

.month-tile:hover .mt-month {
    color: #F06C02;
}

.month-tile.active {
    background: #F06C02;
    border-color: #F06C02;
}

.month-tile.active .mt-month,
.month-tile.active .mt-year {
    color: #ffffff;
}




/* Mobile: bottom sheet feel */
@media (max-width: 640px) {
    .months-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}





/* === Select Reports: strict 2-row layout === */

.select-reports .driver-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.select-reports .driver-meta {
    min-width: 0;
}

.select-reports .report-actions {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.select-reports .driver-summary-row {
    margin-top: 10px;
}

.select-reports .driver-summary {
    color: #64748b;
    font-size: 18px;
    line-height: 1.3;
}




.select-reports .driver-row-top{display:flex;align-items:center;justify-content:space-between;gap:18px}
.select-reports .driver-row-bottom{margin-top:10px}
.select-reports .driver-summary{color:#64748b;font-size:0.95rem;line-height:1.25}
.select-reports .report-actions{display:flex;gap:14px;align-items:center}

/* keep buttons on the same line on desktop; on small screens stack nicely */
@media (max-width: 820px){
  .select-reports .driver-row-top{flex-direction:column;align-items:flex-start}
  .select-reports .report-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .select-reports .driver-summary{width:100%}
}



.select-reports .driver-summary { color: #6b7280; font-size: 0.95rem; line-height: 1.3; }

.select-reports .report-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.select-reports .report-actions .btn-outline,
.select-reports .report-actions .btn-primary { height: 40px; padding: 0 14px; font-size: 14px; font-weight: 800; border-radius: 12px; line-height: 40px; }

@media (max-width: 700px) {
    .select-reports .report-actions { width: 100%; justify-content: flex-start; }
}







@media (max-width: 720px){
  .select-reports .driver-meta strong{font-size:22px;line-height:1.15;}
  .select-reports .driver-meta small{font-size:16px;}
  .select-reports .report-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%;}
  .select-reports .report-actions button{flex:1 1 auto;min-width:140px;}
  .select-reports .driver-summary{font-size:18px;line-height:1.25;text-align:left;white-space:normal;}
}

@media (max-width: 420px){
  .select-reports .report-actions button{min-width:0;flex:1 1 100%;}
}






/* ===== Select Reports: driver rows (2-row layout) ===== */

.select-reports .driver-report-row{
    display:block;
    padding:18px 0;
    border-bottom:1px solid #eef2f7;
}

.select-reports .driver-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.select-reports .driver-meta{
    min-width:0;
}

.select-reports .driver-bottom{
    margin-top:10px;
}

.select-reports .driver-summary{
    display:block;
    width:100%;
    color:#64748b;
    font-size:0.95rem;
    line-height:1.3;
    white-space:normal;
}

/* Buttons (same “scale” as your Next Step button) */
.select-reports .report-actions{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.select-reports .report-actions .btn-outline,
.select-reports .report-actions .btn-primary{
    height:36px;
    line-height:36px;
    padding:0 14px;
    font-size:14px;
    font-weight:700;
    border-radius:10px;
}

.select-reports .btn-outline,
.select-reports .btn-primary{
    position: relative;
}

.select-reports .btn-outline > *,
.select-reports .btn-primary > *{
    position: relative;
    top: -1px;
}



/* Mobile: stack row top nicely */
@media (max-width:700px){

    .select-reports .driver-top{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .select-reports .report-actions{
        width:100%;
        justify-content:flex-start;
    }

    .select-reports .report-actions button{
        flex:1 1 auto;
        min-width:140px;
    }
}

@media (max-width:420px){
    .select-reports .report-actions button{
        min-width:0;
        flex:1 1 100%;
    }
}


/* ===== Months modal: desktop centered, mobile bottom-sheet slide ===== */

.months-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
}

.months-modal[aria-hidden="false"]{
    display:block;
}

.months-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,0.35);
}

/* Desktop size (NOT huge) */
.months-modal-panel{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(560px, calc(100vw - 32px));
    max-width:560px;
    max-height:min(720px, calc(100vh - 48px));
    overflow:hidden;
    background:#fff;
    border-radius:14px;
    border:1px solid rgba(226,232,240,0.9);
    box-shadow:0 20px 40px rgba(0,0,0,0.18);
}

/* Mobile: slide up */
@media (max-width:900px){

    .months-modal-panel{
        left:12px;
        right:12px;
        top:auto;
        bottom:12px;
        width:auto;
        max-width:none;
        max-height:85vh;
        transform:translateY(120%);
        transition:transform 220ms ease;
        border-radius:18px;
    }

    .months-modal.is-open .months-modal-panel{
        transform:translateY(0);
    }

    .months-modal-body{
        overflow:auto;
        max-height:calc(85vh - 150px);
        padding-bottom:calc(12px + env(safe-area-inset-bottom));
    }

    .months-grid{
        grid-template-columns:repeat(3, 1fr);
    }

}

/* Month tiles (month big, year muted above/below) */
.months-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    padding-bottom:10px;
}

.month-tile{
    height:44px;
    border-radius:10px;
    border:1px solid #e2e8f0;
    background:#fff;
    cursor:pointer;
    user-select:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:6px 8px;
}

.month-tile .mt-month{
    font-weight:800;
    font-size:14px;
    line-height:1;
    color:#1e293b;
}

.month-tile .mt-year{
    font-weight:600;
    font-size:11px;
    line-height:1;
    color:#94a3b8;
}

.month-tile:hover{
    border-color:#F06C02;
}

.month-tile:hover .mt-month{
    color:#F06C02;
}

.month-tile.active{
    background:#F06C02;
    border-color:#F06C02;
}

.month-tile.active .mt-month,
.month-tile.active .mt-year{
    color:#fff;
}


/* Modal footer: left + right groups, buttons NOT tiny */
.months-modal-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 16px 16px 16px;
    border-top:1px solid #eef2f7;
}

.months-modal-footer .footer-left,
.months-modal-footer .footer-right{
    display:flex;
    gap:10px;
    align-items:center;
}

.months-modal-footer .btn-outline,
.months-modal-footer .btn-primary{
    height:36px;
    line-height:36px;
    padding:0 14px;
    font-size:14px;
    font-weight:700;
    border-radius:10px;
}

/* Footer wrap on narrow screens */
@media (max-width:520px){

    .months-modal-footer{
        flex-wrap:wrap;
    }

    .months-modal-footer .footer-left,
    .months-modal-footer .footer-right{
        width:100%;
        justify-content:flex-start;
    }

    .months-modal-footer .footer-right{
        justify-content:flex-end;
    }

}





.months-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.35)}

.months-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 10px 16px;border-bottom:1px solid #eef2f7}

.months-modal-title{display:flex;flex-direction:column;gap:4px}

.months-modal-driver{font-size:18px;font-weight:800;line-height:1.2;color:#0f172a}

.months-modal-sub{font-size:13px;font-weight:600;line-height:1.2;color:#64748b}




.months-modal-backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.35);
    z-index:1000;
}

.months-modal-close{
    appearance:none;
    border:0;
    background:transparent;
    font-size:20px;
    line-height:1;
    color:#475569;
    cursor:pointer;
    padding:6px;
}

.months-modal-close:hover{
    color:#0f172a;
}

.months-modal-body{
    padding:16px;
    overflow:auto;
    max-height:calc(100vh - 220px);
}




.select-reports .driver-report-row{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px 0;
    border-bottom:1px solid #e5e7eb;
}

.select-reports .driver-report-row:last-child{
    border-bottom:none;
}

/* TOP ROW */
.select-reports .driver-report-row .driver-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

/* LEFT: DRIVER META */
.select-reports .driver-report-row .driver-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}

.select-reports .driver-report-row .driver-meta strong{
    font-size:15px;
    font-weight:700;
    color:#0f172a;
}

.select-reports .driver-report-row .driver-meta small{
    font-size:0.8rem;
    color:#64748b;
}

/* RIGHT: ACTION BUTTONS */
.select-reports .driver-report-row .report-actions{
    display:flex;
    gap:8px;
    flex-shrink:0;
}

/* SECOND ROW */
.select-reports .driver-report-row .driver-bottom{
    padding-left:0;
}

.select-reports .driver-summary{
    font-size:13px;
    color:#475569;
}

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

    .select-reports .driver-report-row .driver-top{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .select-reports .driver-report-row .report-actions{
        width:100%;
        flex-wrap:wrap;
    }

    .select-reports .driver-report-row .report-actions button{
        flex:1 1 auto;
    }
}

.select-reports .driver-summary .summary-text{font-size:18px;font-weight:700;color:#1f2937;margin-bottom:8px}
.select-reports .driver-summary .summary-count{font-weight:600;color:#64748b}
.select-reports .driver-summary .summary-badges{display:flex;flex-direction:column;gap:6px}
.select-reports .driver-summary .year-badges-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.select-reports .driver-summary .year-badges-label{min-width:52px;font-weight:700;color:#64748b}
.select-reports .driver-summary .month-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;border:1px solid rgba(47,95,227,.25);background:rgba(47,95,227,.08);color:#F06C02;font-weight:800;font-size:13px;line-height:1}







.months-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    display:none;
}

.months-modal[aria-hidden="false"]{
    display:block;
}

.months-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.35);
    opacity:0;
    transition:opacity 180ms ease;
    z-index:0;
}

.months-modal.is-open .months-modal-backdrop{
    opacity:1;
}

.months-modal-panel{
    position:absolute;
    z-index:1;
}




@media (max-width: 900px){

    .months-modal-panel{
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: 50% !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box !important;
        max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }

    .months-modal-body{
        overflow: auto !important;
        max-height: calc(100vh - 24px - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        -webkit-overflow-scrolling: touch;
    }

}



.driver-meta .date-range {
	color: #bbb !important;
}


.btn-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.month-tile.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}


/*
.month-tile.is-disabled::after { /* later */ }
*/


/* ===== Months modal: reduce orange dominance ===== */

/* ===== Months modal: reduce orange dominance ===== */

.months-modal .month-tile:hover{
    border-color: #F06C02;
    background: rgba(240,108,2,0.06);
}

.months-modal .month-tile:hover .mt-month{
    color: #F06C02;
}

/* Selected month: subtle orange tint (not solid) */
.months-modal .month-tile.active{
    background: rgba(240,108,2,0.12);
    border-color: rgba(240,108,2,0.70);
}

.months-modal .month-tile.active .mt-month{
    color: #F06C02;
}

.months-modal .month-tile.active .mt-year{
    color: #64748b;
}



/* Footer utility buttons: neutral by default, orange on hover */
.months-modal .months-modal-footer .btn-outline{
    background: #ffffff;
    border: 2px solid #cbd5e1;
    color: #475569;
}

.months-modal .months-modal-footer .btn-outline:hover{
    background: #f8fafc;
    border-color: #F06C02;
    color: #0f172a;
}

/* Keep OK as the only strong orange action */
.months-modal .months-modal-footer .btn-primary{
    background: #F06C02;
    border-color: #F06C02;
    color: #ffffff;
}



/* Latest quarter – subtle outline, not orange-filled */
.months-modal #btn-latest-quarter {
    background: #ffffff;
    border: 1.5px solid #F06C02;
    color: #F06C02;
}

.months-modal #btn-latest-quarter:hover {
    background: rgba(240,108,2,0.06);
    border-color: #F06C02;
}

.months-modal #btn-latest-quarter.btn-disabled,
.months-modal #btn-latest-quarter:disabled {
    border-color: #cbd5e1;
    color: #94a3b8;
    background: #f1f5f9;
    cursor: not-allowed;
}

.months-modal #btn-latest-quarter.btn-disabled:hover,
.months-modal #btn-latest-quarter:disabled:hover {
    border-color: #cbd5e1;
    color: #94a3b8;
    background: #f1f5f9;
}



@media (max-width: 640px){
  /* Krajee bootstrap-fileinput: keep filenames readable on mobile */
  .file-preview .file-footer-caption,
  .file-preview .file-caption-info,
  .file-preview .file-caption-name{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;

    max-width: 100% !important;
    display: block !important;
  }
}

@media (max-width: 640px){
  /* Krajee bootstrap-fileinput: force single-column previews on mobile */
  .file-preview-thumbnails{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .file-preview-thumbnails .file-preview-frame{
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  /* keep the inner preview area full width too */
  .file-preview-thumbnails .kv-file-content{
    width:100% !important;
  }
}


.month-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  line-height:1;
  white-space:nowrap;

  color:#f97316;
  border:2px solid rgba(249,115,22,0.55);
  background:rgba(249,115,22,0.10);
}




:root{
  --accent: #F06C02; /* <- put YOUR exact orange here */
}

/* active step number box */
.progress-step.active .step-box{
  background: var(--accent) !important;
  box-shadow: 0 0 0 5px rgba(232,119,34,0.25) !important; /* optional glow; tweak if you want */
}

/* active step label */
.progress-step.active .step-title{
  color: var(--accent) !important;
}

/* active connector line fill */
.progress-step::after{
  background: var(--accent) !important;
}

/* OPTIONAL: if you want completed steps to also be orange instead of green */
.progress-step.completed .step-box{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.progress-step.completed .step-title{
  color: var(--accent) !important;
}


html {
    overflow-y: scroll;
}



.ts-modal{display:none;position:fixed;inset:0;z-index:9999;}
.ts-modal.is-open{display:block;}
.ts-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.35);}
.ts-modal__panel{position:relative;max-width:900px;width:92%;max-height:85vh;overflow:auto;margin:6vh auto;background:#fff;border-radius:18px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,0.25);}
.ts-modal__close{position:absolute;top:10px;right:14px;border:0;background:transparent;font-size:28px;line-height:28px;cursor:pointer;color:#334155;}
.ts-modal__content{margin-top:10px;color:#334155;font-size:14px;line-height:1.45;}

@media (max-width: 900px){
    .form-row{flex-direction:column;}
    .form-group{width:100%;}
}




.segmented{
    display:flex;
    gap:10px;
    margin-top:6px;
}

.segmented__item{
    flex:0 0 auto;
    padding:6px 14px;
    border:2px solid #e2e8f0;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    user-select:none;
    color:#64748b;
}

.segmented__item input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.segmented__item.is-active{
    border-color:#F06C02;
    background:#F06C02;
    color:#ffffff;
}

@media (max-width: 600px){
    .segmented{flex-wrap:wrap;}
}


.segmented__item {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    transition: all 0.2s ease;
}

.segmented__item.is-active {
    background: #fff4e6;
    border-color: #f97316;
    color: #ea580c;
}

.segmented__item.is-active {
    background: #f97316;
    border-color: #f97316;
    color: #ffffff;
}

.segmented__item:hover {
    border-color: #f97316;
}







.form-control{
    width:100%;
}

#btn-pay.is-disabled{
    opacity:0.6;
}




/* Placeholder text */
input::placeholder{
    color:#CBD5E1;
    opacity:1;
}

/* Safari / older WebKit */
input::-webkit-input-placeholder{
    color:#CBD5E1;
}

/* Firefox */
input::-moz-placeholder{
    color:#CBD5E1;
    opacity:1;
}

/* Edge / old IE */
input:-ms-input-placeholder{
    color:#CBD5E1;
}





input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:#F06C02;
    /*box-shadow:0 0 0 3px rgba(240,108,2,0.20);*/
}

.payment-option.is-selected{
    background-color:#FFF3E8;
    border-color:#F06C02;
}



input[type="radio"]{
    accent-color:#F06C02;
}




#lnk-tos, #lnk-privacy {
    color:#F06C02;
}

#lnk-tos {
	margin:0 4px;
}
#lnk-privacy {
	margin:0 0 0 4px;
}




/*
input[type="checkbox"],
input[type="radio"]{
    appearance:auto;
    -webkit-appearance:auto;
}

input[type="checkbox"],
input[type="radio"]{
    accent-color:#F06C02;
}*/







.report-gen-left__header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.report-gen-left__bulk{
    display:flex;
    gap:10px;
}

.report-gen-left__hide{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:12px 0 14px;
    font-size:0.9rem;
    color:#64748b;
}

.report-gen-table-wrap{
    overflow:auto;
    border-radius:0;
	margin-top:11px;
	margin-bottom:20px;
}

.report-gen-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    min-width:520px;
}

.report-gen-table thead th{
    padding:14px 18px;
    background:#f8fafc;
    color:#6b778c;
    font-weight:600;
    border-bottom:2px solid #e4e9f2;
    text-align:left;
}

.report-gen-table tbody td{
    padding:16px 18px;
    border-bottom:1px solid #e8edf5;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.report-gen-table__actions-col{
    text-align:right;
}

.report-gen-row{
    transition:background 0.15s;
}

.report-gen-status{
    font-weight:600;
    font-size:0.9rem;
    color:#94a3b8;
}

.report-gen-status--progress{
    color:#1e293b;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.report-gen-spinner{
    width:14px;
    height:14px;
    border:2px solid #e2e8f0;
    border-top-color:#F06C02;
    border-radius:50%;
    animation:reportgenspin 700ms linear infinite;
}

@keyframes reportgenspin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

.report-gen-action-btn{
    background:#f1f5f9;
    border:1px solid #e2e8f0;
    border-radius:4px;
    padding:6px 10px;
    margin-left:6px;
    cursor:pointer;
}

.report-gen-action-btn:hover{
    background:#F06C02;
    color:#fff;
    border-color:#F06C02;
}

.report-gen-hidden{
    display:none !important;
}

.btn-download-zip {
    border-radius: 8px!important;
}

.report-gen-left__bulk .btn-primary {
    border-radius: 8px;
}




.report-gen-left.half-masked {
    position: relative;
    /*opacity: 0.6;*/
	/*opacity: 0.45;*/
    filter: grayscale(20%);
    /*pointer-events: none;*/
    user-select: none;
    filter: grayscale(20%);	
}

/*.report-gen-left.half-masked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.4);
    border-radius: inherit;
}

.results-section.half-masked {
	/ *background: #f8fafc;* /
	box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);
}*/


.report-gen-left.half-masked .report-gen-left__main {
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
}

.report-gen-left.half-masked::after {
    content: "";
    position: absolute;
    inset: 0 0 70px 0; /* leave bottom button area uncovered if needed */
    background: rgba(255,255,255,0.4);
    border-radius: inherit;
    pointer-events: none;
}

.btn-back-to-home {
    position: relative;
    z-index: 3;
}




.report-gen-table .report-gen-driver-cell{
    font-size:0.9rem;
}

.report-gen-table .report-gen-driver-cell .report-gen-driver-name{
    font-weight:700;
}

.report-gen-table .report-gen-driver-cell .report-gen-driver-card{
    font-size:0.8rem;
    color:#8a94a6;
    font-weight:500;
}

#report-gen-tbody td:nth-child(2) {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1f2937; /* same dark neutral as driver name */
}

#report-gen-tbody td:nth-child(3) {
    font-size: 0.85rem;
    font-weight: 500;
    color: #9aa3b2; /* muted, matches card number tone */
}





.report-gen-action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:44px;
    border:1px solid #E1E8F2;
    border-radius:8px;
    background:#F3F7FC;
    color:#1F2937;
}

.report-gen-action-btn i{
    font-size:18px;
    line-height:1;
    color:inherit;
}



.app-msgbar {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 18px;
    margin: 14px 0 0 0;

    border-radius: 8px;
    border: 1px solid transparent;

    font-size: 0.95rem;
    line-height: 1.4;
    grid-column: 1 / -1;
}

.app-msgbar__icon {
    flex: 0 0 28px;
    height: 28px;

    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.app-msgbar__content {
    flex: 1;
	line-height: 1.65;
}

.app-msgbar__content strong {
    display: block;
    margin-bottom: 8px;
}

.app-msgbar__close {
    background: none;
    border: 0;
    padding: 0 4px;

    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}

.app-msgbar__close:hover {
    opacity: 1;
}


.app-msgbar--onboarding {
    background: #fff7ed;               /* very light orange */
    border: 1px solid #fbd5b5;
    border-left: 6px solid #f06c02;    /* strong visual anchor */
    color: #1e293b;
}

.app-msgbar--onboarding .app-msgbar__icon {
    background: #f06c02;
    color: #fff;
}

.app-msgbar--onboarding strong {
    color: #c2410c;                    /* darker orange for headline */
}


.app-msgbar--info {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

.app-msgbar--info .app-msgbar__icon {
    background: #cbd5e1;
    color: #334155;
}


.app-msgbar--warning {
    background: #fff7ed;
    border-color: #fbd5b5;
	/*border-color: #fed7aa;*/
    color: #1e293b;
    border-left: 6px solid #f06c02;
}

.app-msgbar--warning .app-msgbar__icon {
    background: #f06c02;
    color: #fff;
}


/*
.app-msgbar--decision {
    background: #fff7ed;
    border-color: #fbd5b5;
    color: #1e293b;
    border-left: 6px solid #f06c02;    /* strong visual anchor */
}

.app-msgbar--decision .app-msgbar__icon {
    background: #f06c02;
    color: #fff;
}
*/


.app-msgbar--error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #7f1d1d;
}

.app-msgbar--error .app-msgbar__icon {
    background: #fca5a5;
    color: #7f1d1d;
}

.app-msgbar-container{
    width: 100%;
    max-width: 1280px;  /* use the same max-width as the main content */
    margin: 14px auto 0 auto;
    padding: 0 24px;    /* match the horizontal padding used elsewhere */
}

.app-msgbar{
    width: 100%;
}

.app-msgbar__content.no-title {
	padding-top:3px;
}


.app-msgbar-cta {
    color: #f36600;
    font-weight: 600;
    text-decoration: none;
}

.app-msgbar-cta:hover {
    color: #d95500;
    text-decoration: underline;
}

.app-msgbar-cta i {
    margin-left: 4px;
}



.btn-upload-secondary {
    background: #fff;
    color: #f06c02;
    background: #fff;
    color: #f06c02;
	F06C02
    border: 2px solid #f6b27a;
    border-radius: 8px;
    font-weight: 600;
}

/*.btn-upload-secondary { 
	background: #F06C02; 
	color: white; padding: 12px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s; }*/


.btn-upload-secondary:hover {
    background: #fff7ed;
    border-color: #f06c02;
}



.btn-next {
    /*background: #e5e7eb;*/
    color: #9ca3af;
    border-radius: 8px;
    cursor: not-allowed;
}

.btn-next:disabled,
.btn-next.is-disabled {
    background: #9ca3af;
    color: #9ca3af;
    box-shadow: none;
}

.btn-next:disabled:hover,
.btn-next:is-disabled:hover {
    background: #9ca3af;
}

/*.btn-next.btn-report-without-upload {
	background: #fff!important;
	border: #059669 1px solid!important;
	color: #059669!important;
}*/

.btn-next.btn-report-without-upload {
	background: #fff!important;
	border: #22A565 1px solid!important;
	color: #22A565!important;
}

.btn-next.btn-report-without-upload:hover {
	background: #1F9D55!important;
	border: #1F9D55 1px solid!important;
	color: #fff!important;
}

/* .btn-next:disabled::after {
    content: "Upload files first";
    display: block;
    font-size: 0.75rem;
    margin-top: 4px;
    color: #9ca3af;
}*/


.card--primary-step {
    border: 2px solid #fde2cc;
}


.file-drop-zone, .file-input {
    border: 2px dashed #f6b27a;
    background: #fffdfa;
}


.file-drop-zone:hover,
.file-drop-zone.is-dragover,
.file-input:hover,
.file-input.is-dragover {
    border-color: #f06c02;
    background: #fff3e8;
}


.btn-upload-secondary {
    color: #e25c00;
    border-color: #f6b27a;
}

.login-section .btn-main {
    opacity: 0.9;
}



#upload-files-btn {
    background: #F06C02;
    border: 1px solid #F06C02;
    color: #ffffff;
}

#upload-files-btn:hover {
    background: #e66500;
    border-color: #e66500;
}

.has-onboarding #upload-files-btn {
    background: #F3D6BE;   /* soft orange */
    border: 1px solid #EDC09A;
    color: #ffffff;
}

.has-onboarding #upload-files-btn:hover {
    background: #EDC09A;
    border-color: #E6AF7F;
}



/* Optional: reduce visual dominance of the Upload card itself */
.has-onboarding .upload-card {
    border-color: #F3D6BE;
}



#next-step-btn:disabled,
#next-step-btn.is-disabled {
    background: #E5E7EB;
    border-color: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
}

#next-step-btn:disabled:hover {
    background: #E5E7EB;
}



/* Upload button: disabled states (2 variants) */

/* Base: treat both class-based and real disabled attr */
#upload-files-btn.disabled,
#upload-files-btn.is-disabled,
#upload-files-btn:disabled {
    cursor: not-allowed;
    opacity: 1;                 /* prevent the “washed-out gray” look */
    box-shadow: none;
}

/* Variant A: onboarding is visible -> keep Upload button more faint/soft */
body.has-onboarding #upload-files-btn.disabled,
body.has-onboarding #upload-files-btn.is-disabled,
body.has-onboarding #upload-files-btn:disabled {
    background: #EFD3BB;        /* soft orange-beige */
    border: 1px solid #EFD3BB;  /* almost no border */
    color: rgba(255, 255, 255, 0.92);
}

/* Variant B: no onboarding -> make Upload button slightly more “present”
   (still disabled, just not boring/flat) */
body:not(.has-onboarding) #upload-files-btn.disabled,
body:not(.has-onboarding) #upload-files-btn.is-disabled,
body:not(.has-onboarding) #upload-files-btn:disabled,
body:not(.has-onboarding) #upload-files-btn.disabled:hover,
body:not(.has-onboarding) #upload-files-btn.is-disabled:hover,
body:not(.has-onboarding) #upload-files-btn:disabled:hover {
    background: #F1CFAF;        /* a touch stronger than onboarding */
    border: 1px solid #F0B07A;  /* subtle orange border */
    color: rgba(255, 255, 255, 0.95);
}


/* Make the inner area follow the wrapper hover as well */
.file-input:hover .file-drop-zone,
.file-input.is-dragover .file-drop-zone,
.file-input:hover .file-preview,
.file-input.is-dragover .file-preview {
    background: #fff3e8 !important;
}

/* Optional: make the drop zone background always inherit from wrapper */
.file-drop-zone,
.file-preview {
    background: inherit;
}



/* 1) One background source: the wrapper */
.file-input {
    background-color: #fffdfa;
}

.file-input:hover,
.file-input.is-dragover {
    background-color: #fff3e8;
}

/* 2) Inner layers must not paint their own background */
.file-input .file-preview,
.file-input .file-drop-zone {
    background: transparent !important;
}

/* 3) Remove any background transition that can cause a flash */
.file-input,
.file-input .file-preview,
.file-input .file-drop-zone {
    transition: none !important;
}





/* Next Step: disabled must NOT react to hover (class-based disabled) */
#upload-files-next-btn.disabled,
#upload-files-next-btn.is-disabled,
#upload-files-next-btn:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

/* Block the btn-main:hover orange */
#upload-files-next-btn.disabled:hover,
#upload-files-next-btn.disabled:focus,
#upload-files-next-btn.disabled:active,
#upload-files-next-btn.is-disabled:hover,
#upload-files-next-btn.is-disabled:focus,
#upload-files-next-btn.is-disabled:active,
#upload-files-next-btn:disabled:hover,
#upload-files-next-btn:disabled:focus,
#upload-files-next-btn:disabled:active {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}


#login-button {
	margin: 7px 0 15px 0;
}




.form-hint {
    margin-top: 14px;
    font-size: 0.85rem;
    color: #64748b; /* your “soft text” color */
	text-align: center;
}

.form-hint a {
    color: #1e293b; /* same as headings text, not orange */
    text-decoration: underline;
    font-size: 0.85rem;
}

.form-hint a:hover {
    text-decoration: none;
}


.form-hint-secondary {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
    font-style: italic;	
}





.pf-period {
    line-height: 1.2;
}

.pf-period .pf-date-start,
.pf-period .pf-date-end {
    display: block;
    white-space: nowrap;
    font-size: inherit;
    color: inherit;
}

.pf-period .pf-date-end {
    position: relative;
    padding-left: 10px;
}

.pf-period .pf-date-end::before {
    content: "–";
    position: absolute;
    left: 0;
    color: #94a3b8;
}





.btn-next.disabled {
    background-color: #f1f5f9;
    color: #94a3b8;
    opacity: 0.5;
    box-shadow: none;
    border: 1px solid #e2e8f0;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    border-radius: 6px; /* assuming active is 8px */	
}

.btn-next.disabled,
.btn-next.disabled:hover {
    cursor: default;
}



.processed-files-table thead th {
    font-weight: 500;
    font-size: 0.85rem;
    color: #7a8797;	
    letter-spacing: 0.02em;
    padding-bottom: 14px;
}



.login-hints {
    margin-top: 0px;
}

.login-hints-right {
    width: 100%;
    text-align: right;
}

.login-hints-center {
    width: 100%;
    text-align: center;
    margin-top: 6px;
}

.form-hint-tertiary {
    display: inline-block;
    font-size: 0.8rem;
    color: #64748b;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 0;
}

.form-hint-tertiary:hover {
    color: #475569;
}


#login-button {
    margin-bottom: 6px;
}

.login-form-register-link {
    cursor: pointer;
    text-decoration: underline;
    color: #475569;
    /* font-weight: 600; */
}

.login-form-register-link:hover {
    text-decoration: underline;
    color: #334155;
}






/* Upload files button: enabled */
#upload-files-btn:not([disabled]):not(.disabled) {
    background: #ffffff;
    border: 2px solid #f97316;
    color: #f97316;
    font-weight: 700;
    box-shadow: none;
}

/* Hover/focus: enabled only */
#upload-files-btn:not([disabled]):not(.disabled):hover,
#upload-files-btn:not([disabled]):not(.disabled):focus {
    background: #fff7ed;
    border-color: #f97316;
    color: #f97316;
}


/*
.upload-upload-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.upload-upload-wrapper > .btn-main {
    width: 100%;
}

.upload-ready-hint {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #64748b; /* your soft text */
    line-height: 1.2;
}
*/


.upload-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* Hint sits under the Upload button (column 2) */
.upload-actions-hint {
    grid-column: 2;
    margin-top: -6px;      /* pulls it closer to the buttons row */
    text-align: center;

    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.2;
}




#upload-files-next-btn:not(.disabled):not([disabled]) {
    background-color: #f97316; /* same solid orange as primary actions */
    color: #ffffff;
    border: 1px solid #f97316;
    cursor: pointer;
    opacity: 1;
}

#upload-files-next-btn:not(.disabled):not([disabled]):hover {
    background-color: #ea580c; /* slightly darker on hover */
    border-color: #ea580c;
}

#upload-files-next-btn2:not(.disabled):not([disabled]) {
    background-color: #f97316; /* same solid orange as primary actions */
    color: #ffffff;
    border: 1px solid #f97316;
    cursor: pointer;
    opacity: 1;
}

#upload-files-next-btn2:not(.disabled):not([disabled]):hover {
    background-color: #ea580c; /* slightly darker on hover */
    border-color: #ea580c;
}


.report-actions .btn-outline {
    background: #ffffff;
    border: 1px solid #f97316;
    color: #f97316;
}

.report-actions .btn-outline:hover {
    background: #fff7ed;
}



/*.report-actions .btn-outline.active {
    background: #fff7ed;
    border-color: #f97316;
    color: #ea580c;
    font-weight: 700;
}*/



.report-actions .btn-disabled,
.report-actions .btn-outline.btn-disabled {
    background: #e5e7eb;
    border: 1px solid #94a3b8;   /* darker outline */
    color: #6b7280;
    cursor: not-allowed;
}

.report-actions .btn-disabled:hover {
    background: #e5e7eb;
    border-color: #94a3b8;
    color: #6b7280;
}




.month-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;

    background: #f1f5f9;       /* light slate */
    border: 1px solid #e2e8f0;
    color: #334155;

    font-size: 0.8rem;
    font-weight: 600;
}







.file-insights {
    margin-top: 2px;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.3;
    /*display: flex;
    align-items: center;
    gap: 6px;*/
    margin-top: 2px;  /* slightly more air */
    padding-top: 2px;
    border-top: 1px solid #f1f5f9;  /* very faint */
}}

.file-insights .insight-icon {
    font-size: 0.75rem;
    color: #94a3b8;      /* muted slate, not orange */
}

.file-insights .insight-primary {
    font-weight: 500;
    color: #334155;
}

.file-insights .insight-secondary {
    font-weight: 400;
    color: #64748b;
}

.file-insights-icon {
    /*margin-right: 1px;
    font-size: 0.85rem;
    color: #94a3b8;
    opacity: 0.7;*/
	
    margin-right: 4px;
    color: #64748b;      /* darker than before */
    font-size: 0.85rem;  /* tiny bit larger than text */
    vertical-align: -1px;
}




.info-icon {
    margin-left: 6px;
    font-size: 0.78rem;
    color: #94a3b8;
    opacity: 0.75;          /* was ~0.55 */
    cursor: help;
    vertical-align: text-bottom;
    transition: opacity 0.15s ease, color 0.15s ease;
    position: relative;
    top: -1px;
}

.info-icon:hover {
    opacity: 1;
    color: #64748b;
}



.cart-selection-meta {
    margin: 0px 0 25px;
    font-size: 0.9rem;
    color: #6b7280;
	font-weight: 400;
}

.cart-summary {
    padding-top: 8px;
}

/*.cart-item__right {
	padding-right: 10px;
}*/


#select-files-next-btn2 {
	margin-top:30px;
	margin-bottom:-5px;
}




.select-reports-hint {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.select-reports-hint .bulk-actions a {
    color: #9ca3af;
    text-decoration: none;
    border-bottom: 1px dotted rgba(71, 85, 105, 0.4);
    transition: color 0.15s ease, border-color 0.15s ease;
	font-size: 0.8rem;
}

.select-reports-hint .bulk-actions a:hover {
    color: #1f2937;
    border-color: rgba(31, 41, 55, 0.6);
}

.bulk-separator {
    margin: 0 0px;
    color: #94a3b8;
}





.ts3-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 2000;
}

.ts3-modal.is-open {
    display: block;
}

.ts3-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
}

.ts3-modal__dialog {
    position: relative;
    width: min(520px, calc(100% - 32px));
    margin: 10vh auto 0 auto;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    padding: 28px 28px 26px 28px;
}

.ts3-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}

.ts3-modal__title {
    margin: 0 28px 16px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.ts3-modal__body {
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.45;
}

.ts3-modal__actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.ts3-btn {
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    background: #ffffff;
    color: #0f172a;
	margin-left: 6px;
	/* JNOTE" mouseover */
}

.ts3-btn--muted {
    border-color: #cbd5e1;
    color: #475569;
}

.ts3-btn--primary {
    background: #f97316; /* your orange */
    border-color: #f97316;
    color: #ffffff;
}

.ts3-btn--danger {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}



.outline-btn-flash {
    background: rgba(249, 115, 22, 0.18) !important;
    border-color: rgba(249, 115, 22, 0.45) !important;
    color: #f97316 !important;
    transition: none;
}




.cart-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.cart-remove-btn:hover {
    border-color: rgba(249, 115, 22, 0.45);
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}

.cart-remove-btn:active {
    background: rgba(249, 115, 22, 0.18);
}

.cart-remove-btn:focus {
    outline: none;
}

.cart-remove-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
}





.order-review-table {
    width: 100%;
    border-collapse: collapse;
}

.order-review-table th,
.order-review-table td {
    padding: 15px 12px;
}

.order-review-table th:nth-child(1),
.order-review-table td:nth-child(1) {
    width: 42%;
}

.order-review-table th:nth-child(2),
.order-review-table td:nth-child(2) {
    width: 20%; /* narrower Period */
}

.order-review-table th:nth-child(3),
.order-review-table td:nth-child(3) {
    width: 18%;
    text-align: right;
    padding-right: 24px; /* more space from remove */
}

.order-review-table th:nth-child(4),
.order-review-table td:nth-child(4) {
    width: 20%; /* wider Remove */
    text-align: center;
}

.order-review-table th:last-child,
.order-review-table td:last-child {
    padding-left: 14px;
}

.order-review-table tbody tr {
    transition: background-color 120ms ease-in-out;
}

.order-review-table tbody tr:hover {
    background-color: #f8fafc;
}

.order-review-table tbody tr:has(.remove-btn:hover) {
    background-color: transparent;
}



#order-review-next-btn {
	margin-top:20px;
	margin-bottom:-5px;
}






/* Base button (enabled) */
#btn-pay {

    background: #F06C02;
    border: 1px solid #F06C02;
    color: #ffffff;

    height: 60px;              /* avoid billboard-height */
    border-radius: 12px;

    /*font-size: 1.15rem;        / * calmer * /
    font-weight: 700;
    letter-spacing: 0.2px;*/
	
    font-size: 1.2rem;   /* ~18px */
    font-weight: 600;      /* not 700, too shouty */
    letter-spacing: 0.2px; /* subtle tightening */	
	
	margin-top: 20px;

}



/* Enabled hover */
#btn-pay:hover:not(:disabled):not(.disabled):not(.is-disabled) {
    background: #e66500;
    border-color: #e66500;
}

/* Disabled */
#btn-pay:disabled,
#btn-pay.disabled,
#btn-pay.is-disabled {
    cursor: not-allowed;
    opacity: 1;
    /*background: #F1CFAF;
    border: 1px solid #F0B07A;
    color: rgba(255, 255, 255, 0.92);*/

	background: #F5C9A4;
	border: 1px solid #F0B07A;
	color: rgba(255,255,255,0.95);

    box-shadow: none;
}

/* Disabled should not change on hover */
#btn-pay:disabled:hover,
#btn-pay.disabled:hover,
#btn-pay.is-disabled:hover {
    background: #F1CFAF !important;
    border-color: #F0B07A !important;
}


#order-review-next-btn:disabled,
#order-review-next-btn.disabled,
#order-review-next-btn.is-disabled {
    cursor: not-allowed;
    opacity: 1;

	background: #F5C9A4;
	border: 1px solid #F0B07A;
	color: rgba(255,255,255,0.95);

    box-shadow: none;
}

/* Disabled should not change on hover */
#order-review-next-btn:disabled:hover,
#order-review-next-btn.disabled:hover,
#order-review-next-btn.is-disabled:hover {
    background: #F1CFAF !important;
    border-color: #F0B07A !important;
}


/*
.summary-line.total {
    font-weight: 800;
    font-size: 1.14em;
    color: #F06C02;
    margin-top: 10px;
}

font-size: 1.8rem; margin-top: 15px; border-top: 2px solid #f1f5f9; padding-top: 15px;




.summary-total {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 2px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1rem;
}


.summary-total-label {
    font-size: 1.35rem;
    font-weight: 600;
    color: #F06C02;
}

.summary-total-amount {
    font-size: 1.45rem;
    font-weight: 700;
    color: #F06C02;
    letter-spacing: 0.2px;
}

.summary-line {

}

*/

.cart-payment-summary {
    font-size: 1rem;
	/*padding-top:1px;
	padding-bottom:5px;*/
	margin-top: 25px;
	/*margin-bottom: 25px;*/
}

.cart-payment-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0px;
    color: #1e293b; /* default black-ish */
}

.cart-payment-summary div:nth-child(3) {
	margin-bottom: 20px;
}

.cart-payment-summary-line--discount .cart-payment-summary-value {
    color: #2e8b57 !important; /* force green */
    font-weight: 500;
}

.cart-payment-summary-total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #f1f5f9;
}

.cart-payment-summary-line--total {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;   /* subtle grey divider */
}

.cart-payment-summary-line--total .cart-payment-summary-label {
    color: #F06C02;
    font-size: 1.25rem;
    font-weight: 600;
}

.cart-payment-summary-line--total .cart-payment-summary-value {
    color: #F06C02;
    font-size: 1.4rem;       /* slightly larger than label */
    font-weight: 700;
}






.register-block {
    margin-top: 18px;
}

.register-block .checkbox-container.checkbox-native {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    line-height: 1.25;
    /*color: #64748b;*/ /* same “soft text” tone used elsewhere */
    /*font-weight: 600;*/
}

.register-block .checkbox-container.checkbox-native input {
	margin-right: 0px !important;
}

.register-block .checkbox-container.checkbox-native .checkmark {
    flex: 0 0 auto;
}

/* If your checkbox CSS uses padding-left tricks instead of flex, this keeps it from drifting */
.register-block .checkbox-container.checkbox-native {
    padding-left: 0;
}

#register-fields {
	margin-top: 10px;
}





.password-field {
    position: relative;
}

.password-field input {
    padding-right: 44px; /* room for the eye button */
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: #334155; /* only color shift, no background */
}

.password-toggle:focus {
    outline: none;
    box-shadow: none; /* remove orange ring */
}

.password-toggle:focus-visible {
    outline: 2px solid rgba(249, 115, 22, 0.5);
    outline-offset: 2px; /* accessible but not “buttony” */
}

.field-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #64748b;
}

.field-error {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #b91c1c;
    display: none;
}

.is-invalid input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.is-valid input {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}




.billing-country-field {
	margin-top: 20px;
}



.pay-hint {
    margin-top: 12px;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
}

.pay-hint--info {
    color: #64748b; /* slate */
}

.pay-hint--warn {
    color: #d97706; /* orange-700 */
}



input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: inherit;
    transition: background-color 9999s ease-in-out 0s;
}




.payment-method-title {
    margin-top: 10px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #475569; /* softer than black */
}





.report-gen-action-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.report-gen-action-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.report-gen-action-btn:active {
    background: #e2e8f0;
}

.report-gen-action-btn:disabled {
    /*opacity: 0.4;*/
    cursor: not-allowed;
}





/* Helps widths behave predictably */
.report-gen-table {
    width: 100%;
    table-layout: fixed;
}

/* Actions: fixed width (your <td> has class report-gen-status-cell) */
.report-gen-table th.report-gen-table__actions-col,
.report-gen-table td.report-gen-status-cell {
    width: 140px;              /* tweak */
    white-space: nowrap;
}

/* Period column: allow wrapping */
.report-gen-table thead th:nth-child(2),
.report-gen-table tbody td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;   /* break only if needed */
    line-height: 1.5;          /* increased spacing */
    padding-top: 10px;         /* optional vertical breathing */
    padding-bottom: 10px;
}

/* Keep each “month(s) + year” together */
.report-gen-table tbody td:nth-child(2) .period-chunk {
    white-space: nowrap;
	font-size: 0.8rem;
}

/* Driver: allow wrapping (you said it can wrap if long) */
.report-gen-driver-name {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Optional: keep the card id on one line (or let it wrap if you prefer) */
.report-gen-driver-card {
    white-space: nowrap;
}




.app-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.app-help-dialog {
    background: #ffffff;
    width: 520px;
    max-width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 14px;
    padding: 24px 24px 28px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
    position: relative;
}

.app-help-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: 0;
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
    color: #64748b;
}

.app-help-close:hover {
    color: #0f172a;
}

.app-help-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.app-help-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #475569;
}

/* --- Mobile bottom sheet --- */

@media (max-width: 768px) {
    .app-help-overlay {
        align-items: flex-end;
    }

    .app-help-dialog {
        width: 100%;
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        max-height: 80vh;
        animation: slideUp 0.25s ease;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}






.report-gen-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 6px;
    margin: 0 6px 0 0;
    color: #64748b;
    cursor: pointer;
    transition: color 120ms ease, opacity 120ms ease;
}

.report-gen-action-btn i {
    font-size: 17px;
    line-height: 1;
}

.report-gen-action-btn:hover {
    background: transparent;
}

.report-gen-action-btn:hover i {
    color: #334155;
}

tr:hover td {
    background: #f8fafc;
}

.report-gen-action-btn.is-locked {
    /*opacity: 0.4;*/
    cursor: not-allowed;
}

.report-gen-action-btn.is-done i {
    color: var(--ts-success, #16a34a);
}



.report-gen-table__actions-col {
    text-align: left;
	padding-left: 28px!important;
}

.report-gen-status-cell {
    text-align: left;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Do NOT ellipsis/clip the Actions cell */
.report-gen-table tbody td.report-gen-status-cell {
    overflow: visible;
    text-overflow: clip;
}

/* Align first icon with header; spacing only between icons */
.report-gen-status-cell .report-gen-action-btn {
    margin-left: 0;
}

.report-gen-status-cell .report-gen-action-btn + .report-gen-action-btn {
    margin-left: 12px;
}

.report-gen-action-btn.is-busy i {
    color: #64748b;
}

.report-gen-action-btn.is-busy.is-done i {
    color: #64748b;
}


#report-gen-hide-processed {
	margin-right: 5px !important;
}



.report-gen-table tr.is-row-busy .report-gen-action-btn {
    pointer-events: none;
    cursor: default;
}

.report-gen-table.is-global-busy .report-gen-action-btn {
    pointer-events: none;
    cursor: default;
}

.report-gen-table.is-global-busy .report-gen-action-btn.is-busy {
    pointer-events: none; /* still disabled */
}







/*.orders-section {
    position: relative;
}

/ * highlight layer * /
.orders-section::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
}

.orders-section--pulse::after {
    animation: ordersPulse 2.2s ease-out;
}*/

.pulse-target {
    position: relative;
}

.pulse-target::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
}

.pulse-target.is-pulsing::after {
    animation: panelPulse 2.2s ease-out;
}

@keyframes panelPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(243,102,0,0.75);
        opacity: 1;
    }

    35% {
        box-shadow: 0 0 0 5px rgba(243,102,0,0.6);
        opacity: 1;
    }

    /* hold the highlight visible */
    70% {
        box-shadow: 0 0 0 5px rgba(243,102,0,0.6);
        opacity: 1;
    }

    100% {
        box-shadow: 0 0 0 10px rgba(243,102,0,0);
        opacity: 0;
    }
}




.app-msgbar .cta-link {
	color: #f36600;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(243,102,0,0.35);
	padding-bottom: 1px;
}

.app-msgbar .cta-link:hover {
	color: #d95500;
	border-bottom-color: #d95500;
}




.app-order-actions-guide {
    margin-top: 6px;
    font-size: 0.85rem;
}

.app-order-action {
    color: #475569;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.app-order-action:hover {
    color: #f06c02;
}

.app-order-actions__sep {
    margin: 0 6px;
    color: #94a3b8;
}

.app-order-actions-info {
	color: #64748b;
	font-size: 0.95rem;
	margin-top: 4px;
	margin-bottom: 14px;
}




/*.app-order-actions-guide {
    margin-top: 6px;
    font-size: 0.85rem;
}*/

.app-msgbar__action {
    color: #475569;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.app-msgbar__action:hover {
    color: #f06c02;
}

.app-msgbar__sep {
    margin: 0 6px;
    color: #94a3b8;
}

/*.app-order-actions-info {
	color: #64748b;
	font-size: 0.95rem;
	margin-top: 4px;
	margin-bottom: 14px;
}*/



.app-msgbar__action.is-disabled {
    color: #94a3b8;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    opacity: 0.8;
}

.app-msgbar__action.is-disabled:hover {
    color: #94a3b8;
}








.app-orders {
    margin-top: 25px;
}

.app-orders__block + .app-orders__block {
    margin-top: 26px;
}

.app-orders__block-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #334155;
    margin-bottom: 16px;
    padding-bottom: 8px;
    /* border-bottom: 1px solid #e5e7eb; */
	border-bottom: 3px solid #f36600;
}

.app-orders__empty {
    color: #64748b;
    font-size: 0.9rem;
    padding: 10px 0;
}

.app-order-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
    padding: 14px 14px;
	margin-top:16px;
}

/*.app-order-card + .app-order-card {
    margin-top: 16px;
}*/

.app-order-card__row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.app-order-card__left {
    flex: 1 1 auto;
    min-width: 0;
}

.app-order-card__right {
    flex: 0 0 220px;
    text-align: right;
}

.app-order-card__drivers {
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
	margin-bottom: 7px;
}

.app-order-card__more {
    font-weight: 800;
    color: #64748b;
    margin-left: 6px;
}

.app-order-card__meta {
    margin-top: 6px;
    font-size: 0.82rem;
    color: #64748b;
    white-space: nowrap;
}

.app-order-card__facts {
    display: flex;
    gap: 22px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.app-order-fact {
    min-width: 110px;
}

.app-order-fact--wide {
    min-width: 160px;
}

.app-order-fact__k {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 2px;
}

.app-order-fact__v {
    font-weight: 800;
    color: #0f172a;
}

.app-order-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    border: 1px solid transparent;
    white-space: nowrap;
}

.app-order-pill--warn {
    color: #9a3412;
    background: #ffedd5;
    border-color: #fed7aa;
}

.app-order-pill--ok {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.app-order-card__actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.app-order-card__actions--right {
    justify-content: flex-end;
}

.app-order-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*height: 36px;*/
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;
    background: transparent !important;
    color: #F06C02 !important;
    border: 1px solid #F06C02 !important;	
}

.app-order-btn--primary {
    background: #f36600;
    color: #ffffff;
    border-color: #f36600;
}

.app-order-btn--primary:hover {
    background: #d95500;
    border-color: #d95500;
}

.app-order-btn--link {
    color: #475569;
    background: transparent;
    border-color: #e5e7eb;
}

.app-order-btn--link:hover {
    background: #f8fafc;
}

@media (max-width: 900px) {
    .app-order-card__row {
        flex-direction: column;
    }

    .app-order-card__right {
        flex: 1 1 auto;
        width: 100%;
        text-align: left;
    }

    .app-order-card__actions--right {
        justify-content: flex-start;
    }

    .app-order-btn--primary,
    .app-order-btn--link {
        width: 100%;
    }
}






.app-orders__summary {
    font-size: 0.9rem;
    font-weight: 800;
    color: #334155;
    padding-bottom: 8px;
    /*border-bottom: 1px solid #e5e7eb;*/
	border-bottom: 3px solid #f36600;
    cursor: pointer;
    list-style: none;
	margin-bottom:16px;
}

.app-orders__summary::-webkit-details-marker {
    display: none;
}

.app-orders__count {
    color: #7f8da3;
    font-weight: 700;
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

.app-orders__completed-list {
    margin-top: 10px;
}

/* Completed order rows */

.app-order-row {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* not space-between */
    gap: 16px;	
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
    background: #ffffff;
	position: relative;
}

.app-order-row {
    margin-top: 15px;
}

.app-order-row__left {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* take the available space */
    min-width: 0;   /* allow proper flex sizing/wrapping */	
}

.app-order-row__drivers {
    font-weight: 800;
    color: #0f172a;
	margin-bottom:10px;
}

.app-order-row__meta {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 2px;
}

.app-order-row__right {
    display: flex;
    align-items: center;
    flex: 0 0 auto; /* keep button sized to content */
    margin-left: auto;	
}





.app-order-drivers-more {
    display: inline;
}

.app-order-drivers-more summary {
    display: inline;
    cursor: pointer;
    color: #64748b;
    font-weight: 700;
    list-style: none;
}

.app-order-drivers-more summary::-webkit-details-marker {
    display: none;
}

.app-order-drivers-more[open] > summary {
    display: none;
}

.app-order-drivers-more__inline {
    display: inline;
}



.app-order-drivers-more {
    color: #64748b;
    font-weight: 700;
    text-decoration: none;
    margin-left: 6px;
}

.app-order-drivers-more:hover {
    text-decoration: underline;
}



.app-order-card {
    position: relative;
    padding: 22px 170px 22px 22px;
    min-height: 130px;
}

.app-order-card__row {
    display: block;
}

.app-order-card__left {
    max-width: 70%;
}

.app-order-card__right {
    position: absolute;
    right: 22px;
    bottom: 22px;
}

.app-order-card__actions--right {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.app-order-card__status {
    margin-top: 4px;
    font-size: 0.9rem;
    color: #475569;
}

.app-order-delete {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    color: #94a3b8;
    font-size: 0.95rem;
    text-decoration: none;
    opacity: 0.55;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*border-radius: 999px;*/
	background: none;
	border-radius: 0;
}

.app-order-delete:hover {
    color: #b91c1c;
    background: none;
    opacity: 1;
}







.app-order-item {
    margin-bottom: 14px;
}

.app-order-details {
    display: none;
    margin-top: -8px;
    padding: 18px 22px 20px 22px;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: #f4f6f8;
    margin-left: 14px;
    margin-right: 14px;
	border-top: 2px solid #e5e7eb;	
}

/* section title */

.app-order-details__title {
    font-weight: 600;
    margin-bottom: 16px;
    color: #334155;
}

/* file list */

.app-order-file {
    margin-bottom: 10px;
}


.app-order-file__driver {
    font-weight: 600;
    color: #1f2937;
}

.app-order-file__name {
    font-size: 0.9rem;
    color: #475569;
    padding-left: 14px;
    word-break: break-all;
    margin-bottom: 10px;
}

/* facts grid */

.app-order-details__grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, auto));
    gap: 14px 30px;
}

.app-order-details__k {
    font-size: 0.8rem;
    color: #64748b;
}

.app-order-details__v {
    font-weight: 600;
    color: #1f2937;
}


.app-order-card__status i {
    color: #bcc7d6;
    margin-right: 4px;
    font-size: 0.9rem;
}



#notification-banner-container {
    width: 100%;
    /*display: block;*/
    margin-bottom: 18px;
    grid-column: 1 / -1;
}

#notification-banner-container .app-msgbar {
    width: 100%;
    box-sizing: border-box;
}







.app-current-order {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 18px 20px 10px 20px;
    margin-bottom: 4px;
}

.app-current-order__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 10px;
}

.app-current-order__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding-bottom: 10px;
}

.app-current-order__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-current-order__status {
    font-weight: 600;
    color: #1e293b;
}

.app-current-order__files {
    font-size: 0.85rem;
    color: #64748b;
}

.app-current-order__actions {
    display: flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 0px;	
}

.app-current-order__footer {
    margin-top: 25px;
    display: flex;
    /*justify-content: space-between;
    align-items: center;*/
}

/*.app-current-order__start-new {
    font-size: 0.85rem;
    color: #94a3b8;
    text-decoration: none;
    font-weight: 400;
    opacity: 0.8;
}

.app-current-order__start-new:hover {
    color: #64748b;
}*/


.app-current-order__view-all {
    text-decoration: none;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 400;
	opacity: 0.8;
	margin-left: auto;
}

.app-current-order__view-all:hover {
    color: #64748b;
}



.btn-main-primary {
    display: inline-block;
    width: auto;

    background-color: #f97316;
    color: #ffffff;
    border: 1px solid #f97316;

    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}


.btn-main {
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-secondary {
    display: inline-block;
    background: #fff;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 12px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 900;
    font-size: 0.9rem;
}





.app-current-order__meta {
    display: flex;
    flex-direction: column;
}

.app-current-order__status {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

.app-current-order__files {
    font-size: 0.9rem;
    color: #64748b;
}

.app-current-order__files strong {
    font-weight: 600;
    color: #475569;
}

.app-current-order__hint {
    margin-top: 16px;
    margin-bottom: 0px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.app-order-card__current_label {
	color: #f97316;
	font-weight: 600;
	font-size: 0.95rem;
	margin-top: 10px;
}



.app-orders__block.unfinished {
    margin-top: 8px;
}

.orders-section {
	padding-bottom:30px;
}


.history-mode .btn-main-primary {
    background: transparent;
    color: #f97316;
    border: 1px solid #f97316;
}

.history-mode .btn-main-primary:hover {
    background: #fff7ed;
}

.history-mode .app-order-btn--primary {
    opacity: 0.9;
}

.history-mode .app-order-card__status i {
    color: #d1d9e6;
}

.history-mode .app-orders__block-title {
	border-bottom: 2px solid rgba(249, 115, 22, 0.65);
}
.history-mode .app-orders__summary {
	border-bottom: 2px solid rgba(249, 115, 22, 0.65);
}




.app-order-file {
    margin-bottom: 18px;
}

.app-order-file:last-child {
    margin-bottom: 0;
}

.app-order-file__driver {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
    margin-top: 18px;
}

.app-order-file__name {
    margin-left: 26px;
    margin-bottom: 8px;
    line-height: 1.25;
    color: #475569;
    word-break: break-all;
}

.app-order-file__name:last-child {
    margin-bottom: 0;
}






.app-current-order__label {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 6px;
}

.app-current-order__status {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.app-current-order__files {
    color: #64748b;
    margin-bottom: 8px;
}

.app-current-order__hint {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.4;
}






.app-current-order__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-current-order__start-new {
    margin-top: 12px;
    font-size: 0.8rem;
    color: #94a3b8;
    text-decoration: none;
    opacity: 0.65;
}

.app-current-order__start-new:hover {
    color: #64748b;
    opacity: 0.85;	
}



.app-order-btn--continue.current-order {
	background-color: #f97316;
    color: #ffffff;
    border: 1px solid #f97316;
}

.app-order-btn--continue.current-order:hover {
	background: #F06C02; 
	color: white;
}

.app-order-btn--continue.order-in-error {
    border-color: #cd5c5c;
}




.section-note {
    margin-bottom: 26px;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.4;
}


#registration-start-button[disabled],
#registration-start-button.is-disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}




.app-msgbar__content {
    line-height: 1.5;
    padding-top: 2px;
}

.app-msgbar__content strong {
    display: inline-block;
    margin-bottom: 6px;
	font-size: 1.15rem;
	font-weight: 700;
}

.app-msgbar__content.no-title {
    padding-top: 2px;
}

.app-msgbar__actions,
.app-msgbar__content .app-msgbar__actions {
    margin-top: 8px;
}

.app-msgbar__sep {
    margin: 0 10px;
}




.app-order-card--in-progress .app-order-card__right {
    display: flex;
    align-items: center;
}

.app-order-card--in-progress .app-order-card__actions--right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-order-card--in-progress .app-current-order__start-new {
    margin-top: 14px;
    text-align: center;
}



.app-order-card__step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #a2aebf;
    color: #a2aebf;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    flex: 0 0 18px;
}



.app-order-card__more {
    display: inline-block;
    margin-left: 10px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #7f8da3;
    text-decoration: none;
    text-underline-offset: 2px;
    font-variant-numeric: tabular-nums;
}

.app-order-card__more:hover {
    color: #44536a;
}



.order-id-panel-note {
    margin-top: 0px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #b0b8c6;
    line-height: 1.4;
}

.order-summary-section h2 {
	margin-bottom: 10px;
}

.order-totals .order-id-panel-note {
    color: #8a95a8;
	margin-bottom:20px;
}

.order-totals h2 {
	margin-bottom: 10px;
}

.pay-and-generate-section .order-id-panel-note {
    color: #8a95a8;
}

.pay-and-generate-section h2 {
	margin-bottom: 10px;
}


.cart-remove-btn,
.cart-remove-btn:hover {
    border: none;
	background: none;
}




.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1f2a44 !important;
}




.order-status-style__in-progress {
	color: #475569;
}

.order-status-style__in-progress .app-order-card__step-badge {
	color: #64748b;
	border-color: #94a3b8;	
}


.order-status-style__failure {
	color: #b91c1c;
}

.order-status-style__failure .app-order-card__step-badge {
	color: #c24141;
	border-color: #c24141;	
}

.app-order-card__more {
    display: inline-block;
    white-space: nowrap;
    margin-left: 6px;
}




.content-box:not(.large-help-block-font) .info-content {
    font-size: 0.92rem;
    color: #6b7280;
    line-height: 1.4;
}

.content-box:not(.large-help-block-font) .info-content p {
    margin: 0 0 12px 0;
}

.content-box:not(.large-help-block-font) .info-content hr {
    margin: 14px 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.content-box:not(.large-help-block-font) .content-bullet-list {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0px 0 16px 0;
    padding-left: 22px;
    line-height: 1.25;
}

.content-box:not(.large-help-block-font) .content-bullet-list li {
    margin-bottom: 4px;
}



.orders-empty-note p {
    margin: 0 0 12px 0;
}

.orders-empty-note p:first-child {
    margin-bottom: 24px;
}

.orders-empty-note p:last-child {
    margin-bottom: 0;
}


.upload-file-list-section .section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
	padding-right: 38px;
}

.upload-file-list-section .section-title-row h2 {
    margin: 0;
}

.upload-file-list-section .btn-next {
    margin: 0;
}




.error-page-main {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 40px;
}

.error-page-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 48px;
    text-align: center;
}

.error-page-section h1 {
    margin: 0 0 24px 0;
    font-size: 2.2rem;
    line-height: 1.15;
}

.error-intro {
    margin: 0 0 14px 0;
    font-size: 1.1rem;
    color: #374151;
}

.error-detail {
    margin: 0 0 32px 0;
    font-size: 1rem;
    color: #6b7280;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.error-page-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 48px;
    min-height: 420px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.error-page-section-inner {
    transform: translateY(-50px);
}


.error-page-section h2 {
    margin: 0 0 40px 0;
    font-size: 1.9rem;
    line-height: 1.15;
    font-weight: 700;
    color: #1f2a44;
}

.error-intro {
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    line-height: 1.45;
    color: #2f3b52;
}

.error-detail {
    margin: 0 0 50px 0;
    font-size: 1rem;
    line-height: 1.45;
    color: #6b7280;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}


/*     color: #475569; */



html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-main,
.error-page-main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}



.months-modal {
    overscroll-behavior: contain;
}

.months-modal-backdrop {
    touch-action: none;
}



/*body.months-modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}*/




#toast-container.toast-center-page {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    max-width: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    z-index: 999999 !important;
}

#toast-container.toast-center-page > div {
    width: 520px !important;
    max-width: calc(100vw - 40px) !important;
    margin: 0 !important;
}

#toast-container.toast-center-page > .toast {
    position: relative;
    width: 520px !important;
    max-width: calc(100vw - 40px) !important;
    margin: 0 !important;
    padding: 26px 28px !important;
    border-radius: 22px !important;
    background-image: none !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
    pointer-events: auto;
    text-align: center;
}

#toast-container.toast-center-page > .toast-error {
    background: #d85c56 !important;
    color: #ffffff !important;
}

#showmsg-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(180, 180, 180, 0.4);
    z-index: 999998;
}

#toast-container {
    z-index: 999999 !important;
}




#toast-container .toast-close-button {
    top: 14px;
    right: 16px;
}

#toast-container .showmsg-popup-close-button {
    margin-top: 4px !important;
    margin-right: 10px !important;
}




#showmsg-blocker {
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: transparent;
}




.single-panel-page-main {
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 40px;
}

.single-panel-page-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 48px;
    text-align: center;
}

.single-panel-page-section h1 {
    margin: 0 0 24px 0;
    font-size: 2.2rem;
    line-height: 1.15;
}

.error-intro {
    margin: 0 0 14px 0;
    font-size: 1.1rem;
    color: #374151;
}

.error-detail {
    margin: 0 0 32px 0;
    font-size: 1rem;
    color: #6b7280;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.single-panel-page-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 48px;
    min-height: 420px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.single-panel-page-section-inner {
    transform: translateY(-50px);
}


.single-panel-page-section h2 {
    margin: 0 0 40px 0;
    font-size: 1.9rem;
    line-height: 1.15;
    font-weight: 700;
    color: #1f2a44;
}

.single-panel-page-intro { 
    margin: 0 0 35px 0;
    /*font-size: 1.05rem;
    line-height: 1.45;
    color: #2f3b52;*/
	
    /*margin-top: 14px; */
    font-size: 0.95rem;
    color: #64748b; /* your “soft text” color */
	text-align: center;
	
}

.single-panel-page-detail {
    margin: 0 0 50px 0;
    font-size: 1rem;
    line-height: 1.45;
    color: #6b7280;
}

.single-panel-page-actions {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}


.single-panel-page-main {
    flex: 1 0 auto;
	max-width: 600px;	
}

.single-panel-page-main {
    max-width: 760px;
}

.single-panel-page-section {
    max-width: 760px;
    margin: 0 auto;
}


.single-panel-page-section {
    position: relative;
}

.single-panel-page-section .help-btn {
    position: absolute;
    top: 24px;
    right: 24px;
}



.single-panel-page-section {
    position: relative;
}

.single-panel-page-section .help-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    left: auto;
    bottom: auto;
    margin: 0;
    z-index: 20;
}


.single-panel-page-link {
    cursor: pointer;
    text-decoration: underline;
    color: #475569;
    /* font-weight: 600; */
}

.single-panel-page-link:hover {
    text-decoration: underline;
    color: #334155;
}




@media (max-width: 767px) {
    .single-panel-page-main,
    .single-panel-page-section {
        max-width: none;
    }
}



@media (max-width: 600px) {
    .app-order-card {
        padding: 22px !important;
        min-height: 0 !important;
    }

    .app-order-card__left {
        max-width: 100% !important;
    }

    .app-order-card__right {
        position: static !important;
        width: 100% !important;
        margin-top: 16px !important;
        text-align: left !important;
    }

    .app-order-card__actions--right {
        justify-content: flex-start !important;
    }
}

@media (max-width: 600px) {
    .app-order-details__grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .app-order-card {
        padding: 22px !important;
        min-height: 0 !important;
    }

    .app-order-card__left {
        max-width: 100% !important;
    }

    .app-order-card__right {
        position: static !important;
        width: 100% !important;
        margin-top: 16px !important;
        text-align: left !important;
    }

    .app-order-card__actions--right {
        justify-content: flex-start !important;
    }
}

/* Tablet portrait: 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {

    .main-grid {
        grid-template-columns: 1fr !important;
    }

    .column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .app-order-details__grid {
        grid-template-columns: 1fr !important;
    }

    .app-order-details__fact,
    .app-order-details__v,
    .app-order-row__left,
    .app-order-row__drivers {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .app-order-card__actions--right {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .app-order-card__actions--right .btn-main,
    .app-order-card__actions--right .btn-secondary,
    .app-order-card__actions--right .app-order-btn--continue,
    .app-order-card__actions--right .app-order-btn--link {
        width: auto !important;
        min-width: 140px !important;
        flex: 0 0 auto !important;
    }
	.date-range, .file-insights {
    min-width: 200px;
}

}

/* =========================
   KLARO – APP STYLE OVERRIDE
   ========================= */

.klaro {
    --font-family: inherit;
}

/* ───────── NOTICE (alsó sáv) ───────── */
.klaro .cookie-notice:not(.cookie-modal-notice) {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
}

/* container */
.klaro .cookie-notice .cn-body {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px 20px !important;
}

/* szöveg */
.klaro .cookie-notice p {
    color: #475569 !important;
    font-size: 13px !important;
}

/* link */
.klaro .cookie-notice a {
    color: #F06C02 !important;
    font-weight: 600;
}

/* gomb sor */
.klaro .cn-buttons {
    display: flex !important;
    gap: 10px;
    flex-wrap: wrap;
}

/* PRIMARY (Accept) */
.klaro .cm-btn.cm-btn-success {
    background: #F06C02 !important;
    border: 1px solid #F06C02 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 600;
}

/* hover */
.klaro .cm-btn.cm-btn-success:hover {
    background: #d45d00 !important;
    border-color: #d45d00 !important;
}

/* secondary */
.klaro .cm-btn {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 600;
}

/* ───────── SETTINGS MODAL ───────── */
.klaro .cookie-modal .cm-modal.cm-klaro {
    background: #ffffff !important;
    color: #1e293b !important;
    border-radius: 12px !important;
    max-width: 520px !important;
}

/* header */
.klaro .cm-header {
    border-bottom: 1px solid #e2e8f0 !important;
}

.klaro .cm-header h1 {
    color: #1e293b !important;
    font-size: 18px !important;
}

/* body */
.klaro .cm-body {
    color: #475569 !important;
}

/* toggle cím */
.klaro .cm-list-title {
    color: #1e293b !important;
}

/* toggle description */
.klaro .cm-list-description {
    color: #64748b !important;
}

/* toggle ON */
.klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: #F06C02 !important;
}

/* toggle OFF */
.klaro .slider {
    background-color: #e2e8f0 !important;
}

/* toggle knob */
.klaro .slider::before {
    background: #ffffff !important;
}

/* footer */
.klaro .cm-footer {
    border-top: 1px solid #e2e8f0 !important;
}

/* ───────── MOBILE (bottom sheet feeling) ───────── */
@media (max-width: 768px) {
    .klaro .cookie-modal .cm-modal.cm-klaro {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
    }
}

/* ───────── FLOATING BUTTON ───────── */
.klaro-cookie-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #F06C02;
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
}

.klaro-cookie-btn:hover {
    background: #d45d00;
}