.kamar-pomoc-page,
.kamar-toast {
--kamar-navy: #103547;
--kamar-dark-red: #962020;
--kamar-pastel-yellow: #F6B767;
--kamar-red: #D40513;
--kamar-green: #059239;
--kamar-light-blue: #f4f7ff;
--kamar-muted: #5b6670;
--kamar-green-text: #046b2c;
}
.kamar-pomoc-page {
max-width: 1000px;
margin: 0 auto;
padding: 16px;
font-family: 'Montserrat', sans-serif;
color: #333;
}
.kamar-pomoc-page *, .kamar-pomoc-page *::before, .kamar-pomoc-page *::after {
box-sizing: border-box;
}
.kamar-pomoc-page .kamar-form-group {
position: relative;
}
.kamar-pomoc-header {
background: linear-gradient(135deg, var(--kamar-navy) 0%, #1a5066 100%);
color: #fff;
text-align: center;
padding: 38px 20px;
border-radius: 16px;
margin-bottom: 28px;
}
.kamar-pomoc-header h1 {
font-size: 28px;
margin: 0 0 6px;
font-weight: 700;
}
.kamar-pomoc-header p {
margin: 0;
opacity: .85;
font-size: 15px;
}
.kamar-pomoc-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.kamar-pomoc-nav-item {
padding: 11px 22px;
background: var(--kamar-light-blue);
border-radius: 10px;
text-decoration: none;
color: var(--kamar-navy);
font-weight: 600;
font-size: 14px;
white-space: nowrap;
flex-shrink: 0;
transition: background .2s, color .2s, transform .15s;
border: 2px solid transparent;
cursor: pointer;
}
.kamar-pomoc-page .kamar-pomoc-nav-item:hover,
.kamar-pomoc-page .kamar-pomoc-nav-item:focus-visible {
background: var(--kamar-navy);
color: #fff;
font-weight: 600;
text-decoration: none;
}
.kamar-pomoc-page .kamar-pomoc-nav-item:focus-visible {
outline: 2px solid var(--kamar-navy);
outline-offset: 2px;
}
.kamar-pomoc-nav-item.active {
background: var(--kamar-navy);
color: #fff;
}
.kamar-pomoc-section {
background: #fff;
border-radius: 14px;
padding: 28px;
margin-bottom: 28px;
box-shadow: 0 2px 12px rgba(16, 53, 71, .06);
}
.kamar-pomoc-section [data-kamar-h="2"] {
color: var(--kamar-navy);
font-size: 22px;
margin: 0 0 18px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
}
.kamar-pomoc-section [data-kamar-h="3"] {
color: var(--kamar-navy);
font-size: 18px;
margin: 0 0 12px;
font-weight: 600;
}
.kamar-quick-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 32px;
}
.kamar-quick-action {
background: linear-gradient(135deg, var(--kamar-light-blue) 0%, #e4eaf8 100%);
border-radius: 14px;
padding: 28px 20px;
text-align: center;
transition: transform .3s, box-shadow .3s, border-color .3s;
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
}
.kamar-pomoc-page .kamar-quick-action:focus-visible {
border-color: var(--kamar-navy);
}
.kamar-quick-action:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(16, 53, 71, .12);
border-color: var(--kamar-navy);
}
.kamar-quick-action-icon {
font-size: 38px;
margin-bottom: 12px;
}
.kamar-quick-action-title {
display: block;
font-size: 17px;
font-weight: 700;
color: var(--kamar-navy);
margin-bottom: 6px;
}
.kamar-quick-action p {
color: #666;
font-size: 13px;
margin: 0;
line-height: 1.4;
}
.kamar-faq-item {
border-bottom: 1px solid #eee;
}
.kamar-pomoc-section .kamar-faq-heading {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.kamar-pomoc-page .kamar-faq-question,
.kamar-pomoc-page .kamar-faq-question:hover,
.kamar-pomoc-page .kamar-faq-question:focus {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
min-height: 48px;
margin: 0;
border: 0;
border-radius: 8px;
background: transparent;
box-shadow: none;
text-align: left;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-transform: none;
letter-spacing: normal;
white-space: normal;
color: var(--kamar-navy);
padding: 12px 4px;
gap: 12px;
}
.kamar-pomoc-page .kamar-faq-question span:first-child {
min-width: 0;
overflow-wrap: anywhere;
}
.kamar-pomoc-page .kamar-faq-question:hover span:first-child {
text-decoration: underline;
text-underline-offset: 3px;
}
.kamar-pomoc-page .kamar-faq-question:focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--kamar-navy);
}
.kamar-faq-arrow {
flex-shrink: 0;
width: 9px;
height: 9px;
margin-right: 6px;
border-right: 2px solid var(--kamar-navy);
border-bottom: 2px solid var(--kamar-navy);
transform: rotate(45deg) translateY(-3px);
transition: transform .25s;
}
.kamar-faq-item.open .kamar-faq-arrow {
transform: rotate(-135deg) translateY(-3px);
}
.kamar-faq-answer {
display: none;
padding: 15px;
background: var(--kamar-light-blue);
border-radius: 8px;
margin-bottom: 12px;
color: #444;
line-height: 1.7;
font-size: 14px;
}
.kamar-faq-answer a {
color: var(--kamar-dark-red);
}
.kamar-faq-item.open .kamar-faq-answer {
display: block;
}
.kamar-contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 18px;
}
.kamar-contact-item {
text-align: center;
padding: 22px 16px;
background: var(--kamar-light-blue);
border-radius: 12px;
transition: transform .2s;
}
.kamar-contact-item:hover {
transform: translateY(-2px);
}
.kamar-contact-item-icon {
font-size: 28px;
margin-bottom: 8px;
}
.kamar-contact-item [data-kamar-h="3"] {
margin: 0 0 6px;
font-size: 16px;
}
.kamar-contact-item a {
color: var(--kamar-dark-red);
text-decoration: none;
font-weight: 500;
}
.kamar-pomoc-page .kamar-contact-item a:hover,
.kamar-pomoc-page .kamar-contact-item a:focus-visible {
color: var(--kamar-dark-red);
font-weight: 500;
text-decoration: underline;
}
.kamar-pomoc-linki {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin: 15px 0 0;
}
.kamar-pomoc-page .kamar-pomoc-link,
.kamar-pomoc-page .kamar-faq-answer a {
display: inline-block;
min-height: 24px;
color: var(--kamar-dark-red);
font-weight: 500;
}
.kamar-pomoc-page .kamar-faq-answer a {
display: inline;
text-decoration: underline;
}
.kamar-pomoc-page .kamar-pomoc-link:hover,
.kamar-pomoc-page .kamar-faq-answer a:hover,
.kamar-pomoc-page .kamar-pomoc-link:focus-visible,
.kamar-pomoc-page .kamar-faq-answer a:focus-visible {
color: var(--kamar-dark-red);
font-weight: 500;
text-decoration: underline;
}
.kamar-pomoc-page a:focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--kamar-navy);
border-radius: 6px;
}
.kamar-contact-item p {
margin: 4px 0 0;
font-size: 13px;
color: var(--kamar-muted);
}
.kamar-form-group {
margin-bottom: 20px;
}
.kamar-form-group label {
display: block;
margin-bottom: 7px;
font-weight: 600;
color: var(--kamar-navy);
font-size: 14px;
}
.kamar-form-group input,
.kamar-form-group textarea,
.kamar-form-group select {
width: 100%;
padding: 12px 14px;
border: 2px solid #dde1e6;
border-radius: 10px;
font-size: 15px;
transition: border-color .2s, box-shadow .2s;
font-family: inherit;
background: #fff;
}
.kamar-form-group input:focus,
.kamar-form-group textarea:focus,
.kamar-form-group select:focus {
border-color: var(--kamar-navy);
outline: none;
box-shadow: 0 0 0 3px rgba(16, 53, 71, .08);
}
.kamar-form-group textarea {
min-height: 110px;
resize: vertical;
}
.kamar-form-help {
font-size: 12px;
color: var(--kamar-muted);
margin-top: 5px;
}
.kamar-submit-btn {
background-color: var(--kamar-navy, #103547) !important;
color: #fff !important;
border: none !important;
padding: 14px 36px !important;
font-size: 15px !important;
font-weight: 700 !important;
border-radius: 10px !important;
cursor: pointer;
transition: background-color .2s, color .2s;
display: inline-flex !important;
align-items: center;
gap: 8px;
text-decoration: none !important;
font-family: inherit;
letter-spacing: .3px;
line-height: 1.4;
}
a.kamar-submit-btn,
a.kamar-submit-btn:link,
a.kamar-submit-btn:visited {
background-color: var(--kamar-navy, #103547) !important;
color: #fff !important;
text-decoration: none !important;
}
.kamar-submit-btn:hover,
a.kamar-submit-btn:hover {
background-color: var(--kamar-pastel-yellow, #F6B767) !important;
color: var(--kamar-navy, #103547) !important;
}
.kamar-submit-btn:active,
a.kamar-submit-btn:active {
background-color: var(--kamar-pastel-yellow, #F6B767) !important;
color: var(--kamar-navy, #103547) !important;
}
.kamar-pomoc-page .kamar-submit-btn:focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--kamar-navy) !important;
}
.kamar-submit-btn:disabled {
background-color: #b0b5bc !important;
cursor: not-allowed;
opacity: .7;
}
.kamar-submit-btn--secondary {
background-color: var(--kamar-navy, #103547) !important;
}
a.kamar-submit-btn--secondary,
a.kamar-submit-btn--secondary:link,
a.kamar-submit-btn--secondary:visited {
background-color: var(--kamar-navy, #103547) !important;
color: #fff !important;
}
.kamar-submit-btn--secondary:hover,
a.kamar-submit-btn--secondary:hover {
background-color: var(--kamar-pastel-yellow, #F6B767) !important;
color: var(--kamar-navy, #103547) !important;
}
.kamar-form-group.has-error input,
.kamar-form-group.has-error textarea,
.kamar-form-group.has-error select,
.kamar-pomoc-page input[data-numer-konta][aria-invalid="true"] {
border-color: var(--kamar-red);
box-shadow: 0 0 0 3px rgba(212, 5, 19, .08);
}
.kamar-pomoc-page .kamar-pole-komunikat {
margin: 6px 0 0;
color: var(--kamar-red);
font-size: 13px;
font-weight: 600;
}
.kamar-pomoc-page .kamar-pole-komunikat:empty {
display: none;
}
.kamar-validation-error {
color: var(--kamar-red);
font-size: 12px;
margin-top: 5px;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.kamar-validation-error::before {
content: "!";
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--kamar-red);
color: #fff;
font-size: 10px;
line-height: 1;
}
.kamar-form-group .kamar-form-label {
display: block;
margin-bottom: 7px;
font-weight: 600;
color: var(--kamar-navy);
font-size: 14px;
}
.kamar-pomoc-powrot {
text-align: center;
margin-top: 20px;
}
.kamar-product-list {
max-height: 300px;
overflow-y: auto;
border: 1px solid #eee;
border-radius: 10px;
padding: 10px;
}
.kamar-product-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-bottom: 1px solid #f0f0f0;
}
.kamar-product-item:last-child {
border-bottom: none;
}
.kamar-product-item input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: var(--kamar-navy);
}
.kamar-product-item img {
width: 48px;
height: 48px;
object-fit: contain;
border-radius: 6px;
border: 1px solid #eee;
}
.kamar-product-info {
flex: 1;
}
.kamar-product-name {
font-weight: 500;
color: var(--kamar-navy);
font-size: 14px;
}
.kamar-product-sku {
font-size: 12px;
color: var(--kamar-muted);
}
.kamar-product-qty {
font-size: 12px;
color: #555;
display: flex;
flex-direction: column;
gap: 4px;
white-space: nowrap;
}
.kamar-form-group .kamar-product-qty select {
width: auto;
padding: 6px 8px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
background: #fff;
color: var(--kamar-navy);
}
.kamar-product-zwrocony {
opacity: .55;
}
.kamar-alert {
padding: 14px 18px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
.kamar-alert-info {
background: #e7f3ff;
border-left: 4px solid #2196F3;
color: #1565c0;
}
.kamar-alert-success {
background: #e8f5e9;
border-left: 4px solid var(--kamar-green);
color: #2e7d32;
}
.kamar-alert-warning {
background: #fff8e1;
border-left: 4px solid var(--kamar-pastel-yellow);
color: #8a4600;
}
.kamar-toast {
position: fixed;
top: 20px;
right: 20px;
padding: 14px 24px;
border-radius: 10px;
color: #fff;
font-weight: 600;
font-size: 14px;
z-index: 10000;
animation: kpSlideIn .3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
@keyframes kpSlideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.kamar-toast-success { background: var(--kamar-green-text); }
.kamar-toast-error { background: var(--kamar-red); }
.kp-tab { display: none; }
.kp-tab.kp-active { display: block; }
.kamar-pomoc-page [id] {
scroll-margin-top: 110px;
}
.kamar-pomoc-page .kamar-pomoc-kafelki-strony {
margin: 0 0 28px;
}
.kamar-pomoc-page .kamar-pomoc-c__kafelki {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kamar-pomoc-page .kamar-pomoc-faq-grupy {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
}
.kamar-pomoc-page .kamar-pomoc-faq-grupy__link,
.kamar-pomoc-page .kamar-pomoc-faq-grupy__link:hover,
.kamar-pomoc-page .kamar-pomoc-faq-grupy__link:focus {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 14px;
border: 1px solid #c9d8e8;
border-radius: 999px;
background: #f7fafd;
color: var(--kamar-navy);
font-size: 14px;
font-weight: 600;
text-decoration: none;
outline: none;
}
.kamar-pomoc-page .kamar-pomoc-faq-grupy__link:hover {
border-color: var(--kamar-navy);
box-shadow: 0 0 0 2px rgba(16, 53, 71, .15);
}
.kamar-pomoc-page .kamar-pomoc-faq-grupy__link:focus-visible {
border-color: var(--kamar-navy);
outline: 2px solid var(--kamar-navy);
outline-offset: 2px;
}
.kamar-pomoc-page .kamar-pomoc-section .kamar-pomoc-faq-grupa {
margin: 22px 0 4px;
padding: 0 0 6px;
border-bottom: 2px solid var(--kamar-pastel-yellow);
color: var(--kamar-navy);
font-size: 15px;
font-weight: 700;
outline: none;
}
.kamar-pomoc-page .kamar-pomoc-przypis {
color: var(--kamar-muted);
}
.kamar-pomoc-page .kamar-pomoc-c .kamar-pomoc-szukaj,
.kamar-pomoc-page .kamar-pomoc-c .kamar-pomoc-status {
margin-bottom: 28px;
}
@media (max-width: 640px) {
.kamar-pomoc-page { padding: 10px; }
.kamar-pomoc-header { padding: 28px 16px; border-radius: 12px; }
.kamar-pomoc-header h1 { font-size: 22px; }
.kamar-pomoc-section { padding: 20px 16px; border-radius: 12px; }
.kamar-quick-actions { grid-template-columns: 1fr; gap: 12px; }
.kamar-quick-action { padding: 22px 16px; }
.kamar-contact-grid { grid-template-columns: 1fr; }
.kamar-pomoc-nav-item { padding: 10px 14px; font-size: 13px; }
.kamar-pomoc-page .kamar-pomoc-c__kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kamar-product-item { flex-wrap: wrap; }
.kamar-product-info { flex: 1 1 140px; min-width: 0; }
.kamar-product-qty { flex: 1 0 100%; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; }
}
@media (min-width: 641px) and (max-width: 704px) {
.kamar-quick-actions { grid-template-columns: repeat(2, 1fr); }
}