.o24-field { margin-bottom: 15px; }
.o24-field label { display: block; font-weight: 600; margin-bottom: 3px; }
.o24-field .req { color: #d63638; }

.o24-cb-label { font-weight: normal !important; cursor: pointer; }

/* Custom Select */
.o24-select-wrapper { position: relative; width: 100%; cursor: pointer; user-select: none; }

.o24-color-dot { width: 18px; height: 18px; border-radius: 3px; border: 1px solid #ddd; margin-right: 10px; display: inline-block; background-color: transparent; }
.o24-arrow { margin-left: auto; color: #999; }
.o24-select-list { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ccc; z-index: 999; max-height: 250px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.o24-opt { padding: 8px 12px; display: flex; align-items: center; border-bottom: 1px solid #f5f5f5; transition: background .2s; }
.o24-opt:hover { background: #f0f0f0; }
.o24-opt small { margin-left: auto; color: #777; }

/* Podsumowanie */
#o24-summary { margin-top: 15px; padding-top: 10px; border-top: 1px dashed #ccc; font-weight: bold; }

/* --- TOOLTIP STYLES (NOWOŚĆ) --- */ 
.o24-tooltip {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    cursor: help;
    margin-left: 5px;
    position: relative;
    top: -2px;
}

.o24-tooltip:hover {
    background: #666;
}

/* Dymek z tekstem */
.o24-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%; /* Nad ikoną */
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    white-space: pre-wrap; /* Pozwala na łamanie tekstu */
    width: max-content;
    max-width: 200px; /* Maksymalna szerokość dymka */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Strzałka dymka */
.o24-tooltip::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
}

.o24-tooltip:hover::after,
.o24-tooltip:hover::before {
    visibility: visible;
    opacity: 1;
}