/* cardDetect page */
#cardDetect .ui-content {
    padding: 16px;
}

/* Form card: bevat tabs + invoervelden in één rounded wit blok.
 * overflow: hidden zodat de tab-strip-achtergrond netjes binnen de
 * afgeronde hoeken valt zonder uit te steken. */
#cardDetect .cardDetectCard {
    background: #ffffff;
    border-radius: 12px;
    padding: 0 24px 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin: 0 auto 16px auto;
    max-width: 760px;
    overflow: hidden;
}

/* Folder-style tabbladen: linksboven, actieve tab vloeit door in het
 * card-body. De rij heeft een onderborder waar de inactieve tabs op
 * "rusten"; de actieve tab krijgt margin-bottom: -1px zodat hij die
 * border overlapt en visueel met de witte body samenvalt. */
#cardDetect .cardDetectTabs {
    display: flex;
    margin: 0 -24px 20px -24px;
    padding: 10px 0 0 16px;
    background: #f5f7fa;
    border-bottom: 1px solid #d6dde5;
    /* reset oude segmented-control regels */
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    max-width: none;
    overflow: visible;
}
#cardDetect .cardDetectTab {
    padding: 10px 24px;
    background: #e8edf3;
    color: #4a5562;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid #d6dde5;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-right: 2px;
    margin-bottom: -1px;
    cursor: pointer;
    flex: 0 0 auto;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* OvPay-logo links van de tab-tekst. Via background-image i.p.v. <img>
 * zodat data-label HTML-translaties het icoon niet overschrijven. */
#cardDetect .cardDetectTab::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../layout/images/ovpay.svg") center/contain no-repeat;
    flex-shrink: 0;
}
#cardDetect .cardDetectTab:last-child {
    margin-right: 0;
}
#cardDetect .cardDetectTab.ui-btn-active {
    background: #ffffff;
    color: #3498db;
}
#cardDetect .cardDetectTab:hover:not(.ui-btn-active) {
    background: #dde4ec;
    color: #3498db;
}
#cardDetect .cardDetectForm {
    margin-bottom: 0;
}
#cardDetect .cardDetectForm .inputTable {
    width: 100%;
    border-collapse: collapse;
}
/* Verticale ademruimte tussen invoerrijen */
#cardDetect .cardDetectForm .inputTable td {
    padding-top: 8px;
    padding-bottom: 8px;
}
/* Label-kolom: smal, rechts uitgelijnd zodat label dicht bij input zit */
#cardDetect .cardDetectForm .inputTable td:first-child {
    width: 140px;
    padding-right: 12px;
    text-align: right;
    white-space: nowrap;
}
#cardDetect .cardDetectForm .inputlabel {
    font-size: 18px;
}
#cardDetect .cardDetectInput {
    width: 100%;
    font-size: 20px;
    padding: 6px 8px;
    box-sizing: border-box;
    /* Maak de cursor goed zichtbaar in readonly velden */
    caret-color: #3498db;
}
/* Bedrag is hooguit "149,99" — geen volle rij nodig */
#cardDetect .cardDetectInputAmount {
    width: 110px;
}
/* Wrap-breedtes: input groeit niet meer mee met de td, maar past bij
 * het aantal verwachte karakters. ServiceID 14 + NLOV-prefix + counter,
 * Pasnummer 8 + counter, Volgnummer 4 + counter. */
#cardDetect .cardDetectInputWrapServiceID {
    width: 340px;
}
#cardDetect .cardDetectInputWrapPassNumber {
    width: 220px;
}
#cardDetect .cardDetectInputWrapFollowNumber {
    width: 160px;
}
#cardDetect .cardDetectInput.activeInput {
    outline: 2px solid #3498db;
    background: #f0f7fd;
}
#cardDetect .cardDetectInputWrap {
    display: flex;
    align-items: stretch;
    border: 1px solid #cccccc;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}
#cardDetect .cardDetectInputWrap:has(.activeInput) {
    outline: 2px solid #3498db;
    background: #f0f7fd;
}
#cardDetect .cardDetectInputWrap .cardDetectPrefix {
    padding: 6px 10px;
    background: #eef2f5;
    border-right: 1px solid #cccccc;
    font-size: 20px;
    font-weight: 600;
    color: #555555;
    display: flex;
    align-items: center;
}
#cardDetect .cardDetectInputWrap .cardDetectInput {
    border: none;
    outline: none;
    background: transparent;
    border-radius: 0;
}
#cardDetect .cardDetectInputWrap .cardDetectInput.activeInput {
    outline: none;
    background: transparent;
}

/* Keyboard card: identieke witte achtergrond + padding als de form card.
 * Wanneer de numpad actief is, krimpt de card naar de breedte van het
 * numpad zelf zodat we geen lege witte ruimte ernaast hebben. */
#cardDetect .cardDetectKeyboardCard {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin: 0 auto 16px auto;
    max-width: 760px;
}
#cardDetect .cardDetectKeyboardCard:has(.vkeyboard.numpad) {
    max-width: 488px;
}
#cardDetect .vkeyboard {
    min-height: 188px;
}
#cardDetect .vkeyboard .vkrow {
    display: flex;
    margin-bottom: 4px;
}
#cardDetect .vkeyboard .vkey {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    line-height: 44px;
    margin: 0 3px;
    padding: 0 4px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    background: #f6f6f6;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #333333;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
}
#cardDetect .vkeyboard .vkey:hover,
#cardDetect .vkeyboard .vkey:active {
    background: #e0e0e0;
}
#cardDetect .vkeyboard .vkey.vkey-wide {
    flex: 2 1 0;
    background: #e7eef5;
}

/* Numeric numpad — smaller en gecentreerd zodat hij niet doortrekt
 * over de volle schermbreedte. Zelfde rij-hoogte als QWERTY zodat
 * de totale keyboard-hoogte gelijk blijft. CSS-grid laat ENTER 2
 * rijen overspannen en de 0 over 2 kolommen. */
#cardDetect .vkeyboard.numpad {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: 44px;
    gap: 4px;
    width: 440px;
    max-width: 100%;
    margin: 0 auto;
}
#cardDetect .vkeyboard.numpad .vkey {
    flex: none;
    height: 44px;
    line-height: 44px;
    margin: 0;
}
#cardDetect .vkeyboard.numpad .vkey.vkey-action {
    background: #e7eef5;
}
#cardDetect .vkeyboard.numpad .vkey.vkey-accent {
    background: #4caf50;
    color: white;
    border-color: #3a8a3f;
}
#cardDetect .vkeyboard.numpad .vkey.vkey-accent:hover,
#cardDetect .vkeyboard.numpad .vkey.vkey-accent:active {
    background: #3a8a3f;
}
#cardDetect .vkeyboard.numpad .vkey.vkey-span-col {
    grid-column: span 2;
}
#cardDetect .vkeyboard.numpad .vkey.vkey-span-row {
    grid-row: span 2;
    height: auto;
    line-height: 1;
    font-size: 24px;
}
/* Knoppen-rij: secundaire Annuleren links van primaire Doorgaan,
 * beide rechts uitgelijnd binnen dezelfde max-width als de cards. */
#cardDetect .buttonContainer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin: 8px auto 0 auto;
    max-width: 760px;
    padding: 0;
}
/* Annuleren — zachte secundaire stijl, zelfde kleurschema als
 * .clearOrder op de order-pagina (pale lavendel + navy). */
#cardDetect #cardDetectCancel.ui-btn {
    background: #eff1fe;
    color: #000062;
    border: 1px solid #000066;
    border-radius: 10px;
    font-weight: normal;
    text-shadow: none;
    box-shadow: none;
    margin: 0;
    min-width: 110px;
}
/* Doorgaan — primaire CTA in brand-blauw, rounded. */
#cardDetect #cardDetectOk.ui-btn {
    background: #e7205d;
    color: #ffffff;
    border: 1px solid #e7205d;
    border-radius: 10px;
    font-weight: 600;
    text-shadow: none;
    margin: 0;
    min-width: 110px;
}

/* Counter (0/14) rechts naast het inputveld — discreet, niet opdringerig */
#cardDetect .cardDetectInputWrap .cardDetectCounter {
    padding: 0 10px;
    font-size: 13px;
    color: #555555;
    background: #eef2f5;
    border-left: 1px solid #cccccc;
    display: flex;
    align-items: center;
}