:root {
--wf-twb-color-bg: #f8f9fa;
--wf-twb-color-text: #1a1f2c;
--wf-twb-color-muted: #6b7280;
--wf-twb-color-primary: #2563eb;
--wf-twb-color-primary-hover: #1d4ed8;
--wf-twb-color-danger: #dc2626;
--wf-twb-color-danger-hover: #b91c1c;
--wf-twb-color-border: #d1d5db;
--wf-twb-color-success: #16a34a;
--wf-twb-radius: 8px;
--wf-twb-shadow: 0 10px 30px -6px rgba( 15, 23, 42, .25 );
--wf-twb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
} .wf-twb-footer-link {
text-align: center;
padding: 12px 20px;
font-family: var( --wf-twb-font );
font-size: 13px;
}
.wf-twb-footer-link a {
color: var( --wf-twb-color-primary );
text-decoration: underline;
} .wf-twb-modal {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba( 15, 23, 42, .55 );
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
font-family: var( --wf-twb-font );
color: var( --wf-twb-color-text );
}
.wf-twb-modal[hidden] { display: none !important; }
html.wf-twb-modal-open { overflow: hidden; }
.wf-twb-modal__inner {
background: #fff;
border-radius: var( --wf-twb-radius );
box-shadow: var( --wf-twb-shadow );
max-width: 560px;
width: 100%;
max-height: calc( 100vh - 40px );
display: flex;
flex-direction: column;
overflow: hidden;
}
.wf-twb-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var( --wf-twb-color-border );
}
.wf-twb-modal__title {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.wf-twb-modal__close {
background: transparent;
border: 0;
font-size: 24px;
line-height: 1;
color: var( --wf-twb-color-muted );
cursor: pointer;
padding: 4px 10px;
}
.wf-twb-modal__close:hover { color: var( --wf-twb-color-text ); }
.wf-twb-modal__body {
padding: 20px;
overflow-y: auto;
}
.wf-twb-modal__intro {
margin: 0 0 18px 0;
color: var( --wf-twb-color-muted );
font-size: 14px;
line-height: 1.5;
}
.wf-twb-modal__footer {
padding: 12px 20px;
border-top: 1px solid var( --wf-twb-color-border );
color: var( --wf-twb-color-muted );
font-size: 12px;
} .wf-twb-field { margin-bottom: 14px; }
.wf-twb-field label {
display: block;
font-size: 13px;
font-weight: 500;
margin-bottom: 6px;
}
.wf-twb-field input,
.wf-twb-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var( --wf-twb-color-border );
border-radius: 6px;
font: inherit;
color: inherit;
background: #fff;
box-sizing: border-box;
}
.wf-twb-field input:focus,
.wf-twb-field textarea:focus {
outline: 3px solid #93c5fd;
outline-offset: 0;
border-color: var( --wf-twb-color-primary );
}
.wf-twb-required { color: var( --wf-twb-color-danger ); margin-left: 2px; }
.wf-twb-error {
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
padding: 10px 12px;
border-radius: 6px;
font-size: 13px;
margin-bottom: 14px;
}
.wf-twb-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 18px;
}
.wf-twb-btn {
border: 0;
border-radius: var( --wf-twb-radius );
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .15s ease;
}
.wf-twb-btn:disabled, .wf-twb-btn.is-loading {
opacity: .6;
cursor: progress;
}
.wf-twb-btn--ghost {
background: transparent;
color: var( --wf-twb-color-muted );
border: 1px solid var( --wf-twb-color-border );
}
.wf-twb-btn--ghost:hover { background: var( --wf-twb-color-bg ); }
.wf-twb-btn--primary {
background: var( --wf-twb-color-primary );
color: #fff;
}
.wf-twb-btn--primary:hover { background: var( --wf-twb-color-primary-hover ); }
.wf-twb-btn--danger {
background: var( --wf-twb-color-danger );
color: #fff;
}
.wf-twb-btn--danger:hover { background: var( --wf-twb-color-danger-hover ); } .wf-twb-summary-meta {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 14px;
margin: 0 0 16px 0;
font-size: 14px;
}
.wf-twb-summary-meta dt { color: var( --wf-twb-color-muted ); }
.wf-twb-summary-meta dd { margin: 0; font-weight: 500; }
.wf-twb-summary-items-title {
margin: 16px 0 6px 0;
font-size: 13px;
color: var( --wf-twb-color-muted );
text-transform: uppercase;
letter-spacing: .04em;
}
.wf-twb-summary-items {
list-style: none;
margin: 0 0 16px 0;
padding: 0;
border: 1px solid var( --wf-twb-color-border );
border-radius: 6px;
}
.wf-twb-summary-items li {
display: flex;
justify-content: space-between;
padding: 10px 12px;
border-bottom: 1px solid var( --wf-twb-color-border );
font-size: 14px;
}
.wf-twb-summary-items li:last-child { border-bottom: 0; } a.wf_twb_withdraw,
.woocommerce a.wf_twb_withdraw,
.woocommerce-orders-table a.wf_twb_withdraw,
.woocommerce-MyAccount-content a.wf_twb_withdraw {
background: transparent !important;
background-color: transparent !important;
color: var( --wf-twb-color-muted ) !important;
border: 0 !important;
padding: 0 !important;
margin: 0 6px !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: inherit !important;
text-decoration: underline !important;
box-shadow: none !important;
min-height: 0 !important;
height: auto !important;
display: inline !important;
}
a.wf_twb_withdraw:hover,
.woocommerce a.wf_twb_withdraw:hover {
color: var( --wf-twb-color-text ) !important;
background: transparent !important;
} .wf-twb-order-notice {
margin: 24px 0 0 0;
padding: 12px 0 0 0;
border-top: 1px solid var( --wf-twb-color-border );
color: var( --wf-twb-color-muted );
font-size: 12px;
line-height: 1.5;
font-family: var( --wf-twb-font );
}
.wf-twb-order-notice__link {
color: var( --wf-twb-color-muted );
text-decoration: underline;
}
.wf-twb-order-notice__link:hover { color: var( --wf-twb-color-text ); } .wf-twb-modal__body--success {
text-align: center;
padding: 32px 20px;
}
.wf-twb-success-icon {
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: 50%;
background: var( --wf-twb-color-success );
color: #fff;
font-size: 32px;
line-height: 56px;
font-weight: 700;
}
.wf-twb-success-meta {
color: var( --wf-twb-color-muted );
font-size: 12px;
margin: 6px 0 18px;
}