/**
 * Player Add-On Form — compact styling when rendered inside the
 * Avada modal (.bocce-addon-modal). All rules are scoped so the form
 * looks normal when rendered outside the modal (e.g. on the standalone
 * test page).
 */

/* ---------- Modal chrome: trim default padding ---------- */
.bocce-addon-modal .modal-header {
    padding: 10px 24px !important;
}
.bocce-addon-modal .modal-body {
    padding: 16px 24px !important;
}

/* ---------- GF wrapper: kill outer margin ---------- */
.bocce-addon-modal .gform_wrapper {
    margin: 0 !important;
}
.bocce-addon-modal .gform_heading {
    display: none !important; /* belt + suspenders w/ title="false" */
}

/* ---------- Fields: tighter vertical rhythm ---------- */
.bocce-addon-modal .gform_wrapper .gform_body .gfield {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.bocce-addon-modal .gform_wrapper .gfield_label {
    margin-bottom: 4px !important;
    font-size: 14px;
    line-height: 1.2;
}
.bocce-addon-modal .gform_wrapper .gfield_description,
.bocce-addon-modal .gform_wrapper .gform-field-label--type-sub {
    font-size: 12px !important;
    line-height: 1.3;
    margin-top: 2px !important;
}

/* ---------- Hide the Player Registration product field display.
   Use off-screen positioning rather than display:none — GF's pricing
   engine treats display:none fields as inactive and excludes them
   from gformCalculateTotalPrice(), which would zero the total. The
   field stays in the DOM, the JS qty setter still drives it, and GF
   still reads it when summing the total. ---------- */
.bocce-addon-modal #field_10_4 {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

/* ---------- Compact player list rows ---------- */
.bocce-addon-modal .ginput_container_list table.gfield_list tbody tr td {
    padding: 4px !important;
}
.bocce-addon-modal .ginput_container_list table.gfield_list tbody tr td.gfield_list_icons {
    padding-left: 4px !important;
}
.bocce-addon-modal .ginput_container_list input[type="text"] {
    padding: 6px 8px !important;
}

/* ---------- Inputs: slightly tighter ---------- */
.bocce-addon-modal .gform_wrapper input[type="text"],
.bocce-addon-modal .gform_wrapper input[type="email"],
.bocce-addon-modal .gform_wrapper select {
    padding: 6px 10px !important;
    line-height: 1.3 !important;
}

/* ---------- Footer / submit: less air ---------- */
.bocce-addon-modal .gform_wrapper .gform_footer {
    margin-top: 8px !important;
    padding-top: 8px !important;
}

/* ---------- Total field: compact ---------- */
.bocce-addon-modal #field_10_5 {
    margin-bottom: 6px !important;
}

/* ---------- Two-column layout for short fields on desktop ----------
   Team (field 1) + Email (field 3) sit side-by-side; everything else
   spans full width. Below 768px stack everything single-column. */
@media (min-width: 768px) {
    .bocce-addon-modal .gform_fields {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 16px !important;
        row-gap: 0 !important;
    }
    .bocce-addon-modal #field_10_1,
    .bocce-addon-modal #field_10_3 {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px);
    }
    .bocce-addon-modal #field_10_2,
    .bocce-addon-modal #field_10_4,
    .bocce-addon-modal #field_10_5,
    .bocce-addon-modal #field_10_6 {
        flex: 0 0 100% !important;
        max-width: 100%;
    }
}