:root { --gcs-accent: #1f3a5f; }
.gcs-form {
--gcs-line: rgba(0, 0, 0, 0.12);
--gcs-soft: rgba(0, 0, 0, 0.04);
--gcs-radius: 10px;
display: block;
margin-top: 1.5em;
}
.gcs-form fieldset.gcs-step {
border: 0;
border-top: 1px solid var(--gcs-line);
margin: 0;
padding: 1.25em 0 0.5em;
min-width: 0;
}
.gcs-form legend {
display: flex;
align-items: center;
gap: 0.6em;
font-weight: 600;
font-size: 1.05em;
padding: 0;
margin-bottom: 0.9em;
float: left;
width: 100%;
}
.gcs-form legend + * { clear: both; }
.gcs-step__num {
display: inline-grid;
place-items: center;
width: 1.7em;
height: 1.7em;
border-radius: 50%;
background: var(--gcs-accent);
color: #fff;
font-size: 0.8em;
font-weight: 700;
flex: none;
}
.gcs-form .form-row { margin: 0 0 0.9em; padding: 0; }
.gcs-form .form-row label { display: block; margin-bottom: 0.3em; font-size: 0.92em; }
.gcs-form .form-row input.input-text,
.gcs-form .form-row textarea,
.gcs-form .form-row select { width: 100%; box-sizing: border-box; }
.gcs-form .optional { font-weight: normal; opacity: 0.7; }
.gcs-hint { font-size: 0.88em; opacity: 0.75; margin: 0.25em 0 0.9em; } .gcs-preview { margin: 0 0 1.25em; }
.gcs-preview__card {
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
background: #fff;
max-width: 440px;
}
.gcs-preview__image {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--gcs-accent), #0f1e33) center / cover no-repeat;
transition: background-image 0.2s ease;
}
.gcs-preview__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
padding: 0.8em 1.1em;
background: var(--gcs-accent);
color: #fff;
}
.gcs-preview__logo { max-height: 28px; width: auto; display: block; }
.gcs-preview__shop { font-weight: 600; font-size: 0.95em; }
.gcs-preview__amount { font-size: 1.6em; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.gcs-preview__note { max-width: 440px; padding: 0.6em 0.2em 0; font-size: 0.92em; }
.gcs-preview__note p { margin: 0 0 0.2em; }
.gcs-preview__to:not(:empty)::before { content: "\2192\00a0"; opacity: 0.6; }
.gcs-preview__message { font-style: italic; overflow-wrap: anywhere; }
.gcs-preview__message.is-placeholder { opacity: 0.45; }
.gcs-preview__from { opacity: 0.8; } .gcs-amounts { display: flex; flex-wrap: wrap; gap: 0.5em; margin-bottom: 0.8em; }
.gcs-chip { position: relative; cursor: pointer; margin: 0; }
.gcs-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gcs-chip > span {
display: inline-block;
min-width: 4.2em;
text-align: center;
padding: 0.6em 1em;
border: 1.5px solid var(--gcs-line);
border-radius: 999px;
font-weight: 600;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.gcs-chip:hover > span { border-color: var(--gcs-accent); }
.gcs-chip input:checked + span, .gcs-chip input:checked + span * { background: var(--gcs-accent); border-color: var(--gcs-accent); color: #fff; }
.gcs-chip input:focus-visible + span { outline: 2px solid var(--gcs-accent); outline-offset: 2px; }
.gcs-custom-amount { max-width: 260px; }
.gcs-custom-amount label { display: block; margin-bottom: 0.3em; font-size: 0.92em; }
.gcs-custom-amount input { width: 100%; box-sizing: border-box; }
.gcs-custom-amount small { display: block; opacity: 0.7; margin-top: 0.3em; } .gcs-design-filters { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 0.8em; }
.gcs-filter {
background: transparent;
color: inherit;
border: 1px solid var(--gcs-line);
border-radius: 999px;
padding: 0.3em 0.9em;
font-size: 0.85em;
cursor: pointer;
}
.gcs-filter.is-active { background: var(--gcs-accent); color: #fff; border-color: var(--gcs-accent); }
.gcs-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.6em; }
.gcs-design {
position: relative;
display: block;
aspect-ratio: 16 / 10;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 0 0 1px var(--gcs-line);
background: var(--gcs-soft);
margin: 0;
}
.gcs-design[hidden] { display: none; }
.gcs-design img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcs-design input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.gcs-design:has(input:checked) { box-shadow: 0 0 0 3px var(--gcs-accent); }
.gcs-design:has(input:focus-visible) { outline: 2px solid var(--gcs-accent); outline-offset: 3px; }
.gcs-design--plain span { display: grid; place-items: center; height: 100%; font-size: 0.85em; background: linear-gradient(135deg, var(--gcs-accent), #0f1e33); color: #fff; }
.gcs-design--upload { border: 1.5px dashed var(--gcs-line); box-shadow: none; background: transparent; }
.gcs-design--upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.gcs-upload-label { display: grid; place-items: center; align-content: center; gap: 0.2em; height: 100%; font-size: 0.78em; text-align: center; padding: 0.3em; line-height: 1.2; }
.gcs-form.is-uploading .gcs-design--upload { opacity: 0.5; pointer-events: none; }
.gcs-upload-status { font-size: 0.88em; margin: 0.5em 0 0; }
.gcs-upload-status.is-error { color: #b32d2e; } .gcs-recipient {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 0.8em;
position: relative;
}
.gcs-recipient + .gcs-recipient { border-top: 1px dashed var(--gcs-line); padding-top: 0.8em; }
.gcs-recipients.is-disabled { opacity: 0.45; }
.gcs-remove-recipient,
.gcs-add-recipient {
background: none;
border: 0;
padding: 0;
color: var(--gcs-accent);
text-decoration: underline;
cursor: pointer;
font-size: 0.9em;
}
.gcs-remove-recipient { grid-column: 1 / -1; justify-self: start; margin: -0.4em 0 0.8em; }
.gcs-add-recipient { margin: 0 0 0.9em; display: inline-block; }
.gcs-delivery { display: grid; grid-template-columns: 2fr 1fr; gap: 0 0.8em; }
.gcs-send-to-me label { display: flex; gap: 0.5em; align-items: flex-start; }
.gcs-counter { display: block; text-align: right; opacity: 0.6; font-size: 0.8em; }
.gcs-actions { display: flex; gap: 0.6em; align-items: center; flex-wrap: wrap; margin-top: 0.6em; padding-top: 1.1em; border-top: 1px solid var(--gcs-line); }
.gcs-actions .quantity { margin: 0; }
@media (max-width: 600px) {
.gcs-recipient, .gcs-delivery { grid-template-columns: 1fr; }
.gcs-actions .single_add_to_cart_button { flex: 1; }
} .gcs-gtp-open { margin-left: 0.5em; }
.gcs-gtp-loop { margin-top: 0.4em; }
.gcs-modal {
border: 0;
border-radius: 14px;
padding: 0;
width: min(560px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
color: inherit;
}
.gcs-modal::backdrop { background: rgba(15, 20, 30, 0.55); }
.gcs-modal__form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); margin: 0; }
.gcs-modal__head { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.25em; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.gcs-modal__head h2 { margin: 0; font-size: 1.2em; }
.gcs-modal__close { background: none; border: 0; font-size: 1.6em; line-height: 1; cursor: pointer; color: inherit; padding: 0.1em 0.3em; }
.gcs-modal__product { display: flex; gap: 1em; padding: 1em 1.25em 0; }
.gcs-modal__product img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; }
.gcs-modal__price { display: block; margin: 0.2em 0; }
.gcs-modal__body { padding: 0.5em 1.25em; overflow-y: auto; }
.gcs-modal__body .form-row { margin: 0 0 0.8em; }
.gcs-modal__body label { display: block; margin-bottom: 0.3em; font-size: 0.92em; }
.gcs-modal__body input.input-text, .gcs-modal__body textarea { width: 100%; box-sizing: border-box; }
.gcs-modal__body .woocommerce-form__label-for-checkbox { display: flex; gap: 0.5em; }
.gcs-modal__foot { padding: 1em 1.25em; border-top: 1px solid rgba(0, 0, 0, 0.08); text-align: right; }
.gcs-modal__error { color: #b32d2e; } .gcs-cart-form { margin: 0 0 1.5em; }
.gcs-cart-form__form label { display: block; font-weight: 600; margin-bottom: 0.4em; }
.gcs-cart-form__row { display: flex; gap: 0.5em; flex-wrap: wrap; }
.gcs-cart-form__row .input-text { flex: 1 1 200px; min-width: 0; }
.gcs-cart-form__applied { list-style: none; margin: 0.8em 0 0; padding: 0; }
.gcs-cart-form__applied li { display: flex; gap: 1em; justify-content: space-between; padding: 0.4em 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.12); font-size: 0.92em; }
.gcs-applied-card .gcs-remove { font-size: 0.85em; margin-left: 0.3em; } .gcs-block-wrap { padding: 8px 16px; }
.gcs-block-applied .wc-block-components-totals-item__value { color: inherit; }
.gcs-block-remove,
.gcs-block-toggle {
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
text-decoration: underline;
font-size: 0.85em;
}
.gcs-block-form form { display: flex; gap: 8px; margin: 4px 0 8px; }
.gcs-block-input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; font: inherit; }
.gcs-block-apply { padding: 8px 14px; border-radius: 4px; border: 1px solid currentColor; background: transparent; cursor: pointer; font: inherit; }
.gcs-block-error { color: #b32d2e; font-size: 0.85em; margin: 4px 0; } .gcs-box { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px; padding: 1.25em; margin: 0 0 1.5em; }
.gcs-box > label, .gcs-balance__form > label, .gcs-add-card > label { display: block; font-weight: 600; margin-bottom: 0.5em; }
.gcs-balance__result { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8em; margin: 1em 0; }
.gcs-balance__result dt { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.65; }
.gcs-balance__result dd { margin: 0.1em 0 0; font-weight: 600; }
.gcs-balance__amount { font-size: 1.5em; }
.gcs-status { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.85em; background: rgba(0, 0, 0, 0.07); }
.gcs-status--active { background: #e6f4ea; color: #1e6b34; }
.gcs-status--expired, .gcs-status--disabled { background: #fbeaea; color: #8a1f1f; }
.gcs-status--suspended { background: #fff4e0; color: #7a4b00; }
.gcs-error { color: #b32d2e; }
.gcs-success { color: #1e6b34; font-weight: 600; }
.gcs-muted { opacity: 0.7; }
.gcs-add-card { margin: 1.25em 0 2em; }
.gcs-actions-cell { white-space: nowrap; text-align: right; }
.gcs-actions-cell .button { margin-left: 0.3em; }
.gcs-placeholder-card {
aspect-ratio: 16 / 10;
border-radius: 10px;
background: linear-gradient(135deg, var(--gcs-accent, #1f3a5f), #0f1e33);
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1em;
box-sizing: border-box;
}
.gcs-placeholder-card span { font-size: 0.85em; opacity: 0.8; }
.gcs-placeholder-card strong { font-size: 1.4em; }