/* Subscribe portal pages - mobile-first responsive overrides */

body {
    background-color: #eeeeee;
    background-image: none;
}

#layout-portlets-cover,
.other-pages-box,
.other-pages-box .ContainerIndent,
.subscribe-logo {
    background-color: #eeeeee !important;
    background-image: none;
}

.other-pages-box {
    box-shadow: none !important;
}

/* PrimeFlex grid essentials (backup when theme flex CSS is not loaded) */
.p-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
}

.p-grid > [class*="p-col"] {
    padding: 0.5rem;
    box-sizing: border-box;
}

.p-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.p-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.p-col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.p-col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

@media screen and (min-width: 576px) {
    .p-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (min-width: 768px) {
    .p-md-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }

    .p-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .p-md-8 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }

    .p-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .p-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media screen and (min-width: 992px) {
    .p-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.p-align-center {
    align-items: center;
}

.p-text-right {
    text-align: right;
}

.p-mb-2 {
    margin-bottom: 0.5rem;
}

.p-mb-3 {
    margin-bottom: 1rem;
}

.subscribe-field-row {
    margin-bottom: 0.25rem;
}

.subscribe-agreement-sections,
.subscribe-agreement-sections table,
.subscribe-agreement-sections tbody,
.subscribe-agreement-sections tr,
.subscribe-agreement-sections td {
    width: 100%;
    box-sizing: border-box;
}

.subscribe-agreement-sections td {
    display: block;
}

.subscribe-agreement-textarea,
.subscribe-agreement-sections .ui-inputtextarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
}

.subscribe-agreement-link,
.subscribe-agreement-row .ui-commandlink {
    color: #1a6f8f !important;
    text-decoration: underline !important;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.subscribe-agreement-link:hover,
.subscribe-agreement-link:focus,
.subscribe-agreement-row .ui-commandlink:hover,
.subscribe-agreement-row .ui-commandlink:focus {
    color: #145a73 !important;
    text-decoration: underline !important;
}

.subscribe-agreement-row {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.subscribe-agreement-row:last-child {
    border-bottom: none;
}

.subscribe-panel {
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.subscribe-panels-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

.subscribe-panels-row > .subscribe-panel {
    margin-bottom: 0;
}

.subscribe-panels-row {
    font-size: 1rem;
}

.subscribe-panels-row .ui-fieldset > .ui-fieldset-legend,
.subscribe-panels-row .subscribe-field-label,
.subscribe-panels-row .ui-outputlabel,
.subscribe-panels-row .ui-inputfield,
.subscribe-panels-row .ui-selectonemenu,
.subscribe-panels-row .ui-selectonemenu-label,
.subscribe-panels-row .ui-inputtextarea,
.subscribe-panels-row .ui-autocomplete-input,
.subscribe-panels-row .ui-calendar input,
.subscribe-panels-row .ui-selectbooleancheckbox label {
    font-size: 1rem;
}

.subscribe-two-column-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
}

.subscribe-column {
    min-width: 0;
}

.subscribe-field-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    align-items: center;
}

.subscribe-field-label {
    display: block;
}

.subscribe-field-control {
    display: block;
    min-width: 0;
}

.subscribe-field-control .ui-inputfield,
.subscribe-field-control .ui-selectonemenu,
.subscribe-field-control .ui-calendar,
.subscribe-field-control .ui-inputtextarea,
.subscribe-field-control .ui-autocomplete {
    width: 100% !important;
    box-sizing: border-box;
}

.subscribe-items-panel {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.subscribe-items-fieldset.ui-fieldset {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.subscribe-items-fieldset > .ui-fieldset-legend {
    width: auto;
    max-width: calc(100% - 1.5rem);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.3;
    box-sizing: border-box;
}

.subscribe-items-fieldset > .ui-fieldset-content {
    padding: 0.5rem 0.35rem;
    box-sizing: border-box;
}

.subscribe-items-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.subscribe-items-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.subscribe-items-table .ui-datatable-tablewrapper {
    max-width: 100%;
    overflow-x: auto;
}

.subscribe-items-table .ui-datatable-tablewrapper table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.subscribe-items-table th.subscribe-col-description,
.subscribe-items-table td.subscribe-col-description {
    width: 58%;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.subscribe-items-table th.subscribe-col-qty,
.subscribe-items-table td.subscribe-col-qty {
    width: 14%;
    max-width: 3.5rem;
    text-align: center;
    white-space: nowrap;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.subscribe-items-table td.subscribe-col-qty .subscribe-qty-input,
.subscribe-items-table td.subscribe-col-qty .ui-inputfield {
    width: 2.75rem !important;
    max-width: 100% !important;
    min-width: 0;
    padding: 2px 3px;
    text-align: center;
    box-sizing: border-box;
}

.subscribe-items-table th.subscribe-col-amount,
.subscribe-items-table td.subscribe-col-amount {
    width: 28%;
    max-width: 5rem;
    text-align: right;
    white-space: nowrap;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.subscribe-items-table .ui-datatable-data > tr > td,
.subscribe-items-table .ui-datatable-thead > tr > th,
.subscribe-items-table td.subscribe-col-qty .subscribe-qty-input,
.subscribe-items-table td.subscribe-col-qty .ui-inputfield {
    font-size: 0.8125rem;
}

.subscribe-items-table .ui-datatable-data > tr > td,
.subscribe-items-table .ui-datatable-thead > tr > th {
    padding: 4px 3px;
    vertical-align: middle;
}

.subscribe-items-instruction {
    display: block;
    margin-bottom: 0.75rem;
}

.subscribe-total-row {
    margin-top: 0.5rem;
}

.subscribe-logo img {
    max-width: 100%;
    height: auto !important;
    max-height: 100px;
}

@media (max-width: 768px) {
    .other-pages-box.Container60 {
        width: 100% !important;
        box-shadow: none !important;
        margin: 0 !important;
        background-color: #eeeeee !important;
    }

    .ContainerIndent {
        padding: 8px !important;
    }

    .Container50,
    .Container100,
    .Container90 {
        width: 100% !important;
        float: none !important;
    }

    .subscribe-panel,
    .subscribe-panels-row {
        margin-bottom: 0.75rem;
    }

    .Fleft,
    .Fright {
        float: none !important;
    }

    .ui-fieldset > .ui-fieldset-legend {
        font-size: 13px;
        padding: 3px 6px;
    }

    .subscribe-panels-row .ui-fieldset > .ui-fieldset-legend {
        font-size: 1rem;
    }

    .subscribe-items-fieldset > .ui-fieldset-legend {
        max-width: calc(100% - 0.75rem);
        font-size: 12px;
        padding: 3px 5px;
    }

    .subscribe-items-fieldset > .ui-fieldset-content {
        padding: 0.35rem 0.2rem;
    }

    .subscribe-items-table th.subscribe-col-description,
    .subscribe-items-table td.subscribe-col-description {
        width: 52%;
    }

    .subscribe-items-table th.subscribe-col-qty,
    .subscribe-items-table td.subscribe-col-qty {
        width: 16%;
        max-width: 3rem;
    }

    .subscribe-items-table td.subscribe-col-qty .subscribe-qty-input,
    .subscribe-items-table td.subscribe-col-qty .ui-inputfield {
        width: 2.5rem !important;
    }

    .subscribe-items-table th.subscribe-col-amount,
    .subscribe-items-table td.subscribe-col-amount {
        width: 32%;
        max-width: 4.25rem;
    }

    .subscribe-items-table .ui-datatable-data > tr > td,
    .subscribe-items-table .ui-datatable-thead > tr > th {
        padding: 3px 2px;
    }

    .subscribe-items-instruction {
        font-size: 0.8125rem;
        margin-bottom: 0.5rem;
    }

    .subscribe-field-row {
        margin-bottom: 6px;
    }

    .subscribe-field-row .ui-inputfield,
    .subscribe-field-row .ui-selectonemenu,
    .subscribe-field-row .ui-selectoneradio,
    .subscribe-field-row .ui-autocomplete,
    .subscribe-field-row .ui-inputtextarea,
    .subscribe-field-row .ui-calendar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .subscribe-action-buttons .ui-button {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .subscribe-payment-actions .ui-button {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .subscribe-debicheck-actions .ui-button {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .subscribe-agreement-row .p-text-right {
        text-align: left;
        margin-top: 0.25rem;
    }

    table[role="grid"] {
        width: 100% !important;
    }
}

@media (min-width: 769px) {
    .subscribe-panels-row {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .subscribe-two-column-fields {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .subscribe-field-pair {
        grid-template-columns: 38% 62%;
        gap: 0.5rem;
    }

    .subscribe-action-buttons .ui-button {
        width: auto;
    }

    .subscribe-payment-actions .ui-button {
        width: auto;
    }

    .subscribe-debicheck-actions .ui-button {
        width: auto;
    }
}