.toplakuca-calc { font-family: inherit; margin: 24px 0; }
.toplakuca-calc__loading,
.toplakuca-calc__error {
padding: 20px;
background: #f5f7fa;
border-radius: 6px;
color: #333;
text-align: center;
}
.toplakuca-calc__error { background: #fee; color: #c33; }
.tlc {
border: 1px solid #e3e7ec;
border-radius: 8px;
background: #fff;
padding: 16px 20px 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
overflow-x: auto;
}
.tlc__row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.tlc__label {
min-width: 180px;
font-weight: 600;
color: #333;
}
.tlc__row--consumption .tlc__field,
.tlc__row--price .tlc__field {
width: 120px;
min-width: 120px;
}
.tlc__field {
padding: 6px 10px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 14px;
background: #fff;
min-width: 100px;
}
.tlc__field:focus { outline: 2px solid #e68200; outline-offset: -1px; border-color: #e68200; }
.tlc__unit { color: #666; }
.tlc__button {
display: inline-block;
padding: 8px 16px;
background: #e68200;
color: #fff;
border: 0;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
text-decoration: none;
line-height: 1.4;
transition: background 0.15s;
}
.tlc__button:hover { background: #b7651c; color: #fff; }
.tlc__button--primary { background: #3da85a; }
.tlc__button--primary:hover { background: #318c48; }
.tlc__button--wa { background: #25d366; }
.tlc__button--wa:hover { background: #1ea952; }
.tlc__button--req { background: #e67e22; }
.tlc__button--req:hover { background: #b8651a; } .tlc__button--pdf {
background: transparent;
color: #444;
border: 1px solid #c4c4c4;
}
.tlc__button--pdf:hover {
background: #f5f5f5;
color: #222;
border-color: #999;
}
.tlc__button--pdf:disabled {
opacity: 0.6;
cursor: not-allowed;
} .tlc__button--csv {
background: transparent;
color: #1d6f42;
border: 1px solid #1d6f42;
}
.tlc__button--csv:hover {
background: #1d6f42;
color: #fff;
border-color: #155a34;
}
.tlc__button--csv:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.tlc__table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 14px;
}
.tlc__th,
.tlc__td {
padding: 8px 10px;
border-bottom: 1px solid #eef1f4;
vertical-align: middle;
text-align: left;
}
.tlc__th {
background: #f7f9fb;
font-weight: 600;
color: #555;
font-size: 13px;
}
.tlc__th--num,
.tlc__td--num { text-align: right; white-space: nowrap; }
.tlc__th--include,
.tlc__td--check { width: 44px; text-align: center; }
.tlc__th--thumb,
.tlc__td--thumb { width: 56px; text-align: center; padding: 4px 6px; }
.tlc__thumb {
max-width: 48px;
max-height: 48px;
border-radius: 4px;
object-fit: contain;
vertical-align: middle;
background: #fff;
border: 1px solid #eef1f4;
}
.tlc__td--label { font-weight: 500; }
.tlc__td--sel { display: flex; }
.tlc__model-sel { max-width: 420px; width: 100%; }
.tlc__amount { width: 70px; text-align: right; }
.tlc__view-link {
display: inline-block;
margin-left: 6px;
padding: 2px 7px;
font-size: 21px;
line-height: 1.2;
color: #e68200;
text-decoration: none;
border: 1px solid transparent;
border-radius: 4px;
vertical-align: middle;
}
.tlc__view-link:hover {
background: #fbf6f0;
border-color: #fde7cd;
color: #e67e22;
text-decoration: none;
} .tlc__radio-group {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 3px;
background: #f7f9fb;
}
.tlc__radio {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 5px 12px;
border-radius: 3px;
font-size: 14px;
color: #555;
transition: background 0.12s, color 0.12s;
user-select: none;
}
label.tlc__radio { margin-bottom: 0px; }
.tlc__radio input[type="radio"] { position: absolute;
opacity: 0;
pointer-events: none;
}
.tlc__radio:hover { background: #e9eef3; color: #333; }
.tlc__radio input[type="radio"]:checked + span { font-weight: 600;
color: #fff;
}
.tlc__radio:has(input[type="radio"]:checked) {
background: #e68200;
color: #fff;
}
.tlc__tr--excluded { opacity: 0.4; }
.tlc__tr--excluded .tlc__price-cell,
.tlc__tr--excluded .tlc__sum-cell { text-decoration: line-through; }
.tlc__tr--total td { border-top: 2px solid #d1d5db; border-bottom: 0; padding-top: 14px; }
.tlc__total-price { font-size: 18px; color: #222; } .tlc__tr--mounting:first-of-type td { border-top: 1px dashed #d1d5db; padding-top: 12px; }
.tlc__tr--mounting .tlc__td--unit { color: #777; font-size: 13px; }
.tlc__price-inp { width: 80px; text-align: right; } .tlc-modal__overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 999999;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px 20px;
overflow-y: auto;
}
.tlc-modal {
position: relative;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0,0,0,0.2);
max-width: 520px;
width: 100%;
padding: 28px 28px 24px;
box-sizing: border-box;
}
.tlc-modal__close {
position: absolute;
top: 8px;
right: 12px;
background: transparent;
border: none;
font-size: 28px;
line-height: 1;
color: #999;
cursor: pointer;
padding: 4px 8px;
}
.tlc-modal__close:hover { color: #333; }
.tlc-modal__title {
margin: 0 0 6px;
font-size: 20px;
color: #222;
}
.tlc-modal__subtitle {
margin: 0 0 18px;
color: #666;
font-size: 14px;
}
.tlc-modal__field { margin-bottom: 12px; }
.tlc-modal__label {
display: block;
margin-bottom: 4px;
font-size: 13px;
color: #555;
font-weight: 500;
}
.tlc-modal__input,
.tlc-modal__textarea {
width: 100%;
padding: 9px 11px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
box-sizing: border-box;
background: #fff;
}
.tlc-modal__input:focus,
.tlc-modal__textarea:focus {
outline: none;
border-color: #e68200;
box-shadow: 0 0 0 3px rgba(74,144,226,0.15);
}
.tlc-modal__textarea { resize: vertical; min-height: 70px; }
.tlc-modal__hint {
margin-top: 4px;
font-size: 12px;
color: #888;
}
.tlc-modal__error {
margin-top: 4px;
font-size: 12px;
color: #c0392b;
min-height: 1em;
}
.tlc-modal__honeypot { position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.tlc-modal__consent {
display: flex;
align-items: flex-start;
gap: 6px;
margin: 14px 0;
font-size: 13px;
color: #555;
cursor: pointer;
user-select: none;
}
.tlc-modal__consent input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
}
.tlc-modal__general-error {
color: #c0392b;
font-size: 13px;
margin: 8px 0;
min-height: 1em;
}
.tlc-modal__submit {
width: 100%;
background: #e68200;
color: #fff;
border: none;
border-radius: 4px;
padding: 11px 18px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
}
.tlc-modal__submit:hover { background: #b7651c; }
.tlc-modal__submit:disabled {
background: #a4c1e0;
cursor: wait;
} .tlc-toast {
position: fixed;
left: 50%;
bottom: 30px;
transform: translate(-50%, 20px);
background: #2d7a3e;
color: #fff;
padding: 12px 22px;
border-radius: 6px;
box-shadow: 0 4px 18px rgba(0,0,0,0.18);
font-size: 14px;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
z-index: 1000000;
max-width: 90vw;
}
.tlc-toast--show {
opacity: 1;
transform: translate(-50%, 0);
}
.tlc__note {
width: 100%;
min-width: 200px;
resize: vertical;
font-size: 13px;
font-family: inherit;
line-height: 1.4;
padding: 6px 8px;
} .tlc__badge {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
font-size: 11px;
line-height: 1.4;
border-radius: 3px;
vertical-align: middle;
white-space: nowrap;
}
.tlc__badge--instock     { background: #e7f7ec; color: #2d7a3e; }
.tlc__badge--onbackorder { background: #fff4e0; color: #a0660e; }
.tlc__summary {
margin-top: 16px;
padding: 12px 14px;
background: #fbf6f0;
border-left: 3px solid #e68200;
border-radius: 4px;
font-size: 14px;
line-height: 1.6;
}
.tlc__summary strong { color: #2c3e50; }
.tlc__buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
@media (max-width: 640px) {
.tlc__label { min-width: 0; flex-basis: 100%; margin-bottom: 4px; }
.tlc__table { font-size: 13px; }
.tlc__th, .tlc__td { padding: 6px 4px; }
.tlc__model-sel { max-width: 200px; }
} .tlc-modal .tlc-modal__submit { display: block; }
.tlc__req-note { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #6b6b6b; }