/* Form gift card stile YITH ("Virtual Gift Card"): galleria design,
 * pulsanti importo, info consegna, anteprima live. */

.gcl-gc {
    margin: 16px 0;
}

/* ====== Titoli step (Choose design / Select amount / Delivery info) ====== */
.gcl-step-title {
    font-size: 16px;
    font-weight: 700;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ====== Layout a due colonne stile YITH (preview sinistra, form destra) ====== */
/* Le due colonne vivono in un wrapper .gcl-product-cols (creato dal JS):
 * lo sticky della preview si ferma alla fine di QUESTO wrapper, prima dei
 * tab recensioni / prodotti correlati. */
.gcl-product-cols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    position: relative;
}

/* NB: la preview NON usa position:sticky qui: la gestisce il JS
 * (product-giftcard.js) per garantire che si fermi alla fine delle
 * colonne, prima dei tab recensioni, su qualsiasi browser. */
.product-type-giftcard .gcl-preview-wrap {
    flex: 0 0 48%;
    max-width: 48%;
}

.product-type-giftcard .gcl-product-cols .summary.entry-summary {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
}

@media (max-width: 768px) {
    .product-type-giftcard .gcl-preview-wrap {
        flex-basis: 100%;
        max-width: 100%;
        position: static;
    }
}

/* ====== Anteprima card ====== */
.gcl-preview-wrap {
    width: 100%;
    margin-bottom: 20px;
}

.gcl-preview-wrap .gcl-card-preview {
    max-width: 100%;
    margin-bottom: 0;
}

.gcl-card-preview__title {
    justify-content: space-between;
    align-items: baseline;
    font-size: 16px;
    font-weight: 700;
}

.gcl-card-preview {
    max-width: 440px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.35);
    background: #fff;
    margin-bottom: 16px;
}

.gcl-card-preview__header {
    height: auto;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: #C8965B;
    position: relative;
}

.gcl-card-preview__brand {
    position: absolute;
    bottom: 8px;
    left: 14px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 13px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.gcl-card-preview__body {
    padding: 14px 16px;
    display: grid;
    gap: 8px;
    font-size: 14px;
}

.gcl-card-preview__row { display: flex; gap: 6px; align-items: baseline; }
.gcl-card-preview__label { font-weight: 600; color: #6b6f7a; }
.gcl-card-preview__msg { color: #333; font-style: italic; min-height: 20px; }
.gcl-card-preview__amount { justify-content: flex-end; font-size: 22px; font-weight: 800; color: #9d7440; }
.gcl-card-preview__delivery { justify-content: flex-end; font-size: 12px; color: #8b8f98; }
.gcl-card-preview__code { text-align: right; color: #a9adb6; font-family: monospace; font-size: 12px; letter-spacing: 0.12em; }

/* ====== Galleria design ====== */
.gcl-design-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gcl-design-item {
    width: 110px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e2e2e6;
    cursor: pointer;
    position: relative;
    background: #f4f4f6 center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.12s ease;
}

.gcl-design-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gcl-design-item:hover { border-color: #C8965B; }
.gcl-design-item.is-active { border-color: #C8965B; box-shadow: 0 0 0 2px rgba(200, 150, 91, 0.25); }

/* ====== Pulsanti importo ====== */
.gcl-amount-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gcl-amount-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 11px 16px;
    border: 2px solid #d9dbe0;
    border-radius: 8px;
    background: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.gcl-amount-btn:hover { border-color: #C8965B; }

.gcl-amount-btn.is-active {
    border-color: #C8965B;
    background: #fdf6ee;
    color: #9d7440;
}

/* ====== Importo manuale inline (placeholder "Custom") ====== */
.gcl-manual-amount {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
    max-width: 240px;
}

.gcl-manual-amount input {
    flex: 1;
    padding: 11px 12px;
    border: 2px solid #d9dbe0;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    min-width: 0;
}

.gcl-manual-amount .gcl-manual-currency {
    padding: 11px 12px;
    border: 2px solid #d9dbe0;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #fafafa;
    color: #6b6f7a;
    font-weight: 600;
}

/* ====== Campi consegna ====== */
.gcl-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    max-width: 560px;
}

.gcl-field { display: flex; flex-direction: column; }
.gcl-field-full { grid-column: 1 / -1; }

.gcl-field label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 5px;
}

.gcl-fields .required { color: #d63638; }

.gcl-fields input[type="text"],
.gcl-fields input[type="email"],
.gcl-fields input[type="date"],
.gcl-fields textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
}

.gcl-fields textarea { resize: vertical; }

.gcl-counter { font-weight: 400; color: #8b8f98; }
.gcl-error { border-color: #d63638 !important; background: #fff5f5; }

@media (max-width: 600px) {
    .gcl-fields { grid-template-columns: 1fr; }
    .gcl-field-half { grid-column: auto; }
}