.eeefr-shop { color: var(--eeefr-ink, #1c2b2a); }
.eeefr-shop *, .eeefr-shop *::before, .eeefr-shop *::after { box-sizing: border-box; }
.eeefr-shop-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 1.75rem;
align-items: start;
}
@media (max-width: 760px) {
.eeefr-shop-grid { grid-template-columns: 1fr; }
}
.eeefr-shop-h { color: var(--eeefr-heading, #0f766e); margin: 0 0 .75rem; font-size: 1.25rem; }
.eeefr-fs {
border: 1px solid #e2e8e7;
border-radius: 12px;
padding: 1rem 1.15rem 1.15rem;
margin: 0 0 1.1rem;
}
.eeefr-fs > legend {
padding: 0 .5rem;
font-weight: 700;
color: var(--eeefr-heading, #0f766e);
font-size: .95rem;
}
.eeefr-field { margin: 0 0 .8rem; }
.eeefr-field > label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.eeefr-field input, .eeefr-field select {
width: 100%;
padding: .6rem .7rem;
border: 1px solid #cbd5d3;
border-radius: 9px;
font-size: 1rem;
background: #fff;
}
.eeefr-field input:focus, .eeefr-field select:focus {
outline: none;
border-color: var(--eeefr-accent);
box-shadow: 0 0 0 3px var(--eeefr-accent-soft, #ccfbf1);
}
.eeefr-field-2 { display: flex; gap: .8rem; }
.eeefr-field-2 > .eeefr-field { flex: 1 1 0; margin-bottom: .8rem; }
.eeefr-field-2 > .eeefr-narrow { flex: 0 0 30%; }
.eeefr-field-2 > .eeefr-grow { flex: 1 1 auto; }
@media (max-width: 480px) { .eeefr-field-2 { flex-direction: column; gap: 0; } .eeefr-field-2 > .eeefr-narrow { flex: 1 1 auto; } }
.eeefr-radio-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.eeefr-radio {
display: inline-flex; align-items: center; gap: .5rem;
border: 1px solid #cbd5d3; border-radius: 9px;
padding: .55rem .85rem; cursor: pointer; font-size: .95rem;
}
.eeefr-radio input { accent-color: var(--eeefr-accent); }
.eeefr-radio:has(input:checked) { border-color: var(--eeefr-accent, #0f766e); background: var(--eeefr-accent-soft, #ccfbf1); }
.eeefr-check { display: flex; align-items: flex-start; gap: .55rem; margin: .5rem 0; font-size: .9rem; line-height: 1.4; }
.eeefr-check input { margin-top: .15rem; accent-color: var(--eeefr-accent); }
.eeefr-check a { color: var(--eeefr-link, #0b554f); }
.eeefr-legal-note { font-size: .82rem; color: #5a6b69; background: #f4f8f7; border-left: 3px solid var(--eeefr-accent); padding: .6rem .75rem; border-radius: 0 8px 8px 0; margin: .5rem 0; }
.eeefr-btn {
display: inline-block; text-decoration: none; text-align: center;
background: #eef2f1; color: var(--eeefr-ink, #1c2b2a);
border: 1px solid #cbd5d3; border-radius: 10px;
padding: .7rem 1.2rem; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.eeefr-btn-pay { background: var(--eeefr-accent, #0f766e); color: var(--eeefr-btn-text, #fff); border-color: var(--eeefr-accent, #0f766e); width: 100%; }
.eeefr-btn-pay:hover { background: var(--eeefr-accent-dark, #0b554f); }
.eeefr-btn.is-loading { opacity: .6; pointer-events: none; }
button.eeefr-btn:disabled { opacity: .6; cursor: default; }
.eeefr-shop-error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: .6rem .75rem; margin: .5rem 0; font-size: .9rem; } .eeefr-shop-summary {
position: sticky; top: 1rem;
border: 1px solid #e2e8e7; border-radius: 14px;
padding: 1.1rem 1.2rem; background: #fafcfb;
}
.eeefr-shop-summary h4 { margin: 0 0 .8rem; color: var(--eeefr-heading, #0f766e); }
.eeefr-sum-row { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; font-size: .92rem; }
.eeefr-sum-sep { height: 1px; background: #e2e8e7; margin: .5rem 0; }
.eeefr-sum-total { font-size: 1.15rem; font-weight: 700; color: var(--eeefr-ink, #1c2b2a); border-top: 2px solid #e2e8e7; margin-top: .3rem; padding-top: .6rem; }
.eeefr-sum-hint { font-size: .78rem; color: #6b7a78; margin: .6rem 0 0; } .eeefr-shop-result { border: 1px solid #e2e8e7; border-radius: 14px; padding: 1.5rem; }
.eeefr-shop-result h3 { margin-top: 0; color: var(--eeefr-heading, #0f766e); }
.eeefr-result-success { border-left: 5px solid #15803d; }
.eeefr-result-pending { border-left: 5px solid #b45309; }
.eeefr-result-failed { border-left: 5px solid #b91c1c; }
.eeefr-shop-result .eeefr-btn { margin-top: .4rem; }.eeecc, .eeecc *, .eeecc-embed, .eeecc-embed * { box-sizing: border-box; } html.eeecc-locked { overflow: hidden; }
html.eeecc-locked body::before {
content: ""; position: fixed; inset: 0; z-index: 99998;
background: rgba(17, 24, 39, .55);
} .eeecc-banner {
position: fixed; z-index: 99999;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 15px; line-height: 1.5; color: var(--eeecc-ink, #232a18);
}
.eeecc-banner[hidden] { display: none; }
.eeecc-banner-card {
background: var(--eeecc-bg, #fff);
border: 1px solid #e5e7eb;
border-radius: var(--eeecc-radius, 14px);
box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
padding: 22px 24px;
max-width: 440px;
}
.eeecc-banner-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; color: var(--eeecc-ink, #232a18); }
.eeecc-banner-text { margin: 0 0 12px; color: var(--eeecc-ink, #232a18); }
.eeecc-banner-links { margin: 0 0 6px; font-size: .9rem; }
.eeecc-banner .eeecc-banner-links a { color: var(--eeecc-accent-dk, #7d9c09) !important; text-decoration: underline !important; box-shadow: none !important; } .eeecc-layout-box.eeecc-pos-right { right: 20px; bottom: 20px; }
.eeecc-layout-box.eeecc-pos-left  { left: 20px;  bottom: 20px; } .eeecc-layout-bar { left: 0; right: 0; bottom: 0; }
.eeecc-layout-bar .eeecc-banner-card {
max-width: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
}
.eeecc-layout-bar .eeecc-banner-head,
.eeecc-layout-bar .eeecc-banner-body { flex: 1 1 320px; }
.eeecc-layout-bar .eeecc-banner-actions { flex: 0 0 auto; } .eeecc-layout-center { inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.eeecc-layout-center::before { content: ""; position: fixed; inset: 0; background: rgba(17, 24, 39, .55); }
.eeecc-layout-center .eeecc-banner-card { position: relative; max-width: 520px; max-height: 86vh; overflow: auto; } .eeecc-banner-actions {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center;
} .eeecc-banner .eeecc-btn {
appearance: none; -webkit-appearance: none; cursor: pointer;
font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.1;
border-radius: 8px !important; padding: 10px 16px !important;
border: 1px solid transparent !important; margin: 0;
text-transform: none !important; letter-spacing: normal;
text-decoration: none !important; text-shadow: none !important; box-shadow: none !important;
width: auto; min-width: 0; height: auto; transition: background .15s ease;
}
.eeecc-banner .eeecc-btn-accept,
.eeecc-banner .eeecc-btn-save {
background: var(--eeecc-accent, #9cc20b) !important;
color: var(--eeecc-on-accent, #1d2a08) !important;
border-color: var(--eeecc-accent-dk, #7d9c09) !important;
}
.eeecc-banner .eeecc-btn-accept { margin-left: auto; }
.eeecc-banner .eeecc-btn-accept:hover,
.eeecc-banner .eeecc-btn-accept:focus,
.eeecc-banner .eeecc-btn-save:hover,
.eeecc-banner .eeecc-btn-save:focus {
background: var(--eeecc-accent-dk, #7d9c09) !important;
color: var(--eeecc-on-accent, #1d2a08) !important;
} .eeecc-banner .eeecc-btn-deny,
.eeecc-banner .eeecc-btn-settings {
background: #f3f4f6 !important; color: #374151 !important; border-color: #d1d5db !important;
}
.eeecc-banner .eeecc-btn-deny:hover,
.eeecc-banner .eeecc-btn-deny:focus,
.eeecc-banner .eeecc-btn-settings:hover,
.eeecc-banner .eeecc-btn-settings:focus { background: #e5e7eb !important; color: #374151 !important; }
.eeecc-banner .eeecc-btn:focus-visible { outline: 2px solid var(--eeecc-accent-dk, #7d9c09); outline-offset: 2px; }
.eeecc-layout-bar .eeecc-btn-accept { margin-left: 0; } .eeecc-settings { margin-top: 8px; border-top: 1px solid #e5e7eb; padding-top: 12px; }
.eeecc-settings[hidden] { display: none; }
.eeecc-settings-intro { margin: 0 0 10px; font-size: .9rem; color: #6b7280; }
.eeecc-cat {
display: block; padding: 10px 12px; margin-bottom: 8px;
background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
}
.eeecc-cat-main { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.eeecc-cat-cb { width: 16px; height: 16px; accent-color: var(--eeecc-accent, #9cc20b); }
.eeecc-cat-label em { font-weight: 400; color: #9ca3af; font-style: normal; font-size: .85em; }
.eeecc-cat-desc { display: block; margin: 4px 0 0 24px; font-size: .85rem; color: #6b7280; } .eeecc-embed {
position: relative; background: #f3f4f6; border: 1px dashed #d1d5db;
border-radius: 10px; overflow: hidden; color: #374151;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.eeecc-embed-inner { position: relative; }
.eeecc-embed[data-eeecc-embed] .eeecc-embed-inner { width: 100%; }
.eeecc-embed-box {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 8px; padding: 28px 22px; min-height: 180px;
}
.eeecc-embed[data-eeecc-embed] .eeecc-embed-box { position: absolute; inset: 0; }
.eeecc-embed-icon {
width: 38px; height: 38px; border-radius: 50%;
background: #e5e7eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.eeecc-embed-title { font-weight: 700; font-size: 1rem; color: #1f2937; }
.eeecc-embed-text { font-size: .88rem; max-width: 42ch; color: #4b5563; }
.eeecc-embed-provider { font-size: .8rem; color: #9ca3af; }
.eeecc-embed .eeecc-embed-load {
appearance: none; -webkit-appearance: none; cursor: pointer;
font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.1; margin-top: 4px;
background: var(--eeecc-accent, #9cc20b) !important; color: var(--eeecc-on-accent, #1d2a08) !important;
border: 1px solid var(--eeecc-accent-dk, #7d9c09) !important; border-radius: 8px !important;
padding: 9px 16px !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important;
text-transform: none !important; width: auto; height: auto;
}
.eeecc-embed .eeecc-embed-load:hover,
.eeecc-embed .eeecc-embed-load:focus { background: var(--eeecc-accent-dk, #7d9c09) !important; color: var(--eeecc-on-accent, #1d2a08) !important; }
.eeecc-embed-always { font-size: .78rem; color: #6b7280; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.eeecc-embed-always input { accent-color: var(--eeecc-accent, #9cc20b); }
.eeecc-embed.is-loading .eeecc-embed-load { opacity: .6; pointer-events: none; } .eeecc-embed[data-eeecc-embed] iframe,
.eeecc-loaded iframe { max-width: 100%; } @media (max-width: 520px) {
.eeecc-layout-box { left: 12px; right: 12px; bottom: 12px; }
.eeecc-layout-box .eeecc-banner-card { max-width: none; }
.eeecc-banner .eeecc-btn-accept { margin-left: 0; }
.eeecc-banner-actions { gap: 6px; }
}