/*
 * gf_cart_summary.css
 *
 * Styling for the in-form cart summary panel, the "Vedi carrello" toggle
 * button, and the post-submit cart embed.
 *
 * Layout & sizing strategy
 * ------------------------
 * Dimensions are expressed in px / fixed-rem rather than em so the panel
 * looks the same regardless of the ambient font-size of the surrounding
 * container. Both mount points (toggle-opened panel and post-submit
 * embed) sit as siblings of the GF form wrapper (NOT inside it), so no
 * theme or GF framework button rules cascade in.
 *
 * Specificity strategy
 * --------------------
 * Self-scoped under the panel/embed classes (BEM child selectors or
 * double-class on root elements) → specificity (0,2,0), enough to beat
 * the GF framework reset (`.gform-theme--framework :where(...)`, 0,1,0)
 * without depending on `.gform_wrapper` as the parent.
 *
 * @since    0.4.0
 * @modified 0.4.0 Re-scoped to be parent-agnostic so post-submit embed
 *                  works after GF AJAX replaces `.gform_wrapper`.
 * @modified 0.4.0 Tightened dimensions and switched to px so both
 *                  contexts render identically.
 */

/* ---------- Toggle button (always inside the form wrapper) ---------- */

.gform_wrapper .ccis-hc-cart-toggle {
    margin-left: 8px;
}

.gform_wrapper .ccis-hc-cart-toggle[hidden] {
    display: none !important;
}

.gform_wrapper .ccis-hc-cart-count {
    font-weight: bold;
    margin-left: 4px;
}

/* ---------- Cart panel: root + structure ---------- */

.ccis-hc-cart-panel.ccis-hc-cart-panel {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fafafa;
    font-size: 14px;
    line-height: 1.4;
    color: #222;
}

.ccis-hc-cart-panel.ccis-hc-cart-panel[hidden] {
    display: none;
}

.ccis-hc-cart-panel .ccis-hc-cart-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ccis-hc-cart-panel .ccis-hc-cart-panel__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

/* Secondary action button in the panel header. The label reads
 * "Torna al form" in the toggle flow and "+ Aggiungi un altro" in the
 * post-submit flow — same DOM class, same outline style, only the text
 * and click handler differ between contexts. Lower visual weight than
 * the primary "Procedi al pagamento" button below. */
.ccis-hc-cart-panel .ccis-hc-cart-panel__back {
    background: transparent;
    border: 1px solid #2271b1;
    border-radius: 4px;
    color: #2271b1;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    padding: 4px 10px;
    text-decoration: none;
}

.ccis-hc-cart-panel .ccis-hc-cart-panel__back:hover {
    background: #2271b1;
    color: #fff;
}

/* "Procedi al pagamento" — primary action. The button carries the
 * `gform_button button` GF classes but those rules are scoped under
 * `.gform_wrapper`, which is GONE in the post-submit embed (GF AJAX
 * replaced the wrapper). We restate the primary style explicitly so
 * the button looks the same in both contexts. */
.ccis-hc-cart-panel .ccis-hc-cart-proceed {
    background: #2271b1;
    border: 1px solid #2271b1;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 8px 16px;
    text-decoration: none;
}

.ccis-hc-cart-panel .ccis-hc-cart-proceed:hover {
    background: #135e96;
    border-color: #135e96;
}

.ccis-hc-cart-panel .ccis-hc-cart-proceed:disabled {
    background: #999;
    border-color: #999;
    cursor: not-allowed;
}

/* ---------- Items list ---------- */

.ccis-hc-cart-panel .ccis-hc-cart-items {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.ccis-hc-cart-panel .ccis-hc-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e6e6e6;
}

.ccis-hc-cart-panel .ccis-hc-cart-item:last-child {
    border-bottom: 0;
}

.ccis-hc-cart-panel .ccis-hc-cart-item__main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Name + price on the same row, with the price right-aligned so it
 * lines up vertically with the subtotal in the totals area below. */
.ccis-hc-cart-panel .ccis-hc-cart-item__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ccis-hc-cart-panel .ccis-hc-cart-item__name {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    min-width: 0;
}

.ccis-hc-cart-panel .ccis-hc-cart-item__price {
    flex: 0 0 auto;
    color: #444;
    font-size: 13px;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.ccis-hc-cart-panel .ccis-hc-cart-item__participants {
    color: #777;
    font-size: 11px;
    line-height: 1.3;
    margin-top: 4px;
    font-style: italic;
}

/* X-shaped remove button, anchored at the left of each row. */
.ccis-hc-cart-panel .ccis-hc-cart-item__remove {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    color: #b32d2e;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ccis-hc-cart-panel .ccis-hc-cart-item__remove:hover {
    background: transparent;
    border-color: transparent;
    color: #8a1f1f;
}

.ccis-hc-cart-panel .ccis-hc-cart-item__remove:disabled {
    color: #aaa;
    cursor: not-allowed;
    background: transparent;
    border-color: transparent;
}

/* ---------- Totals + footer ---------- */

.ccis-hc-cart-panel .ccis-hc-cart-totals {
    border-top: 2px solid #d0d0d0;
    padding-top: 8px;
    text-align: right;
}

.ccis-hc-cart-panel .ccis-hc-cart-subtotal {
    font-size: 13px;
    line-height: 1.3;
}

.ccis-hc-cart-panel .ccis-hc-cart-note {
    color: #555;
    font-size: 11px;
    font-style: italic;
    line-height: 1.3;
    margin: 4px 0 0;
}

.ccis-hc-cart-panel .ccis-hc-cart-panel__footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

/* ---------- Empty / error states ---------- */

.ccis-hc-cart-panel .ccis-hc-cart-empty {
    color: #555;
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

.ccis-hc-cart-submission-error.ccis-hc-cart-submission-error {
    background: #fff5f5;
    border: 1px solid #f0a8a8;
    border-radius: 4px;
    color: #8a1f1f;
    font-size: 13px;
    padding: 10px 14px;
}

/* ---------- Post-submit cart embed ---------- */

/* The `.ccis-hc-post-submit` container is just a positional shell: PHP
 * emits it empty, JS builds the same `.ccis-hc-cart-panel` inside it
 * that powers the toggle flow. No layout rules of its own. */
.ccis-hc-post-submit.ccis-hc-post-submit {
    margin-top: 8px;
}