/* ============================================
   MOBILE RESPONSIVE NAVIGATION
   ============================================ */

/* Hamburger button — hidden on desktop */
.p-header .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    margin-left: auto;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    z-index: 1001;
}

.p-header .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #666;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Hamburger → X animation */
.p-header .nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.p-header .nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.p-header .nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile overlay backdrop */
.p-header .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

.p-header .nav-overlay.active {
    display: block;
}

/* Settings & logout links — hidden on desktop (shown only in mobile nav) */
.p-header .main a.mobile-only {
    display: none;
}

/* ============================================
   TABLET (max 1024px)
   ============================================ */
@media only screen and (max-width: 64rem) {

    .p-header {
        flex-wrap: wrap;
        padding: 0.625rem 1.25rem;
        position: relative;
        align-items: center;
    }

    .p-header .logo {
        flex: 1;
    }

    /* Show hamburger */
    .p-header .nav-toggle {
        display: flex;
        order: 3;
    }

    /* Slide-in nav panel */
    .p-header .main {
        position: fixed;
        top: 0;
        right: -17rem;
        width: 16rem;
        height: 100vh;
        background: #fff;
        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        z-index: 1000;
        transition: right 0.3s ease;
        overflow-y: auto;
        display: flex;
    }

    .p-header .main.open {
        right: 0;
    }

    /* Close (X) button area at top of panel */
    .p-header .main::before {
        content: '';
        display: block;
        height: 3.8rem;
        width: 100%;
        flex-shrink: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .p-header .main a {
        flex: none;
        width: 100%;
        text-align: left;
        padding: 0.875rem 1.5rem;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.875rem;
        border-bottom: 1px solid #f0f0f0;
        box-sizing: border-box;
    }

    /* Show icon inline */
    .p-header .main a:before {
        position: static;
        display: inline-block;
        width: 1.5rem;
        height: auto;
        font-size: 1.25rem;
        text-align: center;
        flex-shrink: 0;
    }

    .p-header .main a:hover {
        background: #fafafa;
    }

    .p-header .main a.active,
    .p-header .main a[aria-current="page"] {
        color: #444;
        background: #f5f5f5;
        font-weight: 600;
    }

    /* Show settings & logout inside the mobile nav panel */
    .p-header .main a.mobile-only {
        display: flex;
    }

    /* Divider before settings/logout */
    /*.p-header .main a.settings.mobile-only {*/
    /*    margin-top: auto;*/
    /*    border-top: 2px solid #eee;*/
    /*}*/
    /* Settings icon */
    .p-header .main a.settings:before {
        content: "\6f";
        font-family: 'rb-icons';
    }

    /* Logout icon */
    .p-header .main a.logout:before {
        content: "\6e";
        font-family: 'rb-icons';
    }

    /* User info in header bar */
    .p-header .user {
        order: 2;
        margin: 0 0.75rem 0 0;
    }

    .p-header .user .greet {
        display: none;
    }

    /* Hide desktop more-actions — now inside nav panel */
    .p-header .more-actions {
        display: none;
    }
}

/* ============================================
   MOBILE (max 600px)
   ============================================ */
@media only screen and (max-width: 37.5rem) {

    .p-header {
        padding: 0.5rem 1rem;
    }

    .p-header .logo {
        max-width: 4rem;
    }

    .p-header .user .name {
        font-size: 0.75rem;
        max-width: 6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .p-header .main {
        width: 14.5rem;
        right: -15rem;
    }

    .p-header .main.open {
        right: 0;
    }
}


/* Tablet (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .list li.item {
        display: none;
    }

    .list li.item:nth-child(-n+2) {
        display: block;
    }
}

/* Mobile (up to 767px) */
@media (max-width: 768px) {
    .list li.item {
        display: none;
    }

    .p-order-list .filter.orders .filter-options {
        padding: 1.25rem 1.5rem;

    }

    .woocommerce-account .woocommerce-MyAccount-content- h1 {
        font-size: 1rem;

    }

    .list li.item:nth-child(1) {
        display: block;
    }

    .p-dashboard .item {
        width: 8.875rem;
    }

    .p-dashboard .item a {
        padding: 1.875rem 0.8125rem;
    }

    .p-dashboard .summary:before {
        font-size: 5.25rem;
    }

    .p-dashboard .summary {

        width: 8.5rem;

    }

    .p-dashboard .summary .count {
        font-size: 2.75rem;
    }

    .p-dashboard .summary label {
        font-size: 13px;
    }

    .p-order-list .filter.orders .filter-options {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .p-order-list .filter.orders .filter-options .option {
        margin: 0;
        width: 100%;
    }

    .p-order-list .filter.orders .filter-options .option input[type="text"],
    .p-order-list .filter.orders .filter-options .option select {
        width: 100%;
    }

    .p-order-list .filter.orders .filter-options .actions {
        margin: 0;
        display: flex;
        gap: 0.625rem;
        justify-content: flex-end;
    }

    .p-order-list .filter.orders .filter-options .actions .btn-reset-filter,
    .p-order-list .filter.orders .filter-options .actions .btn-apply-filter {
        flex: 1;
        text-align: center;
    }

    .p-order-list .filter.orders.active {
        max-height: 100%;
    }

    .p-order-list .orders {
        display: block;
    }

    .p-order-list .orders thead {
        display: none;
    }

    .p-order-list .orders tbody {
        display: block;
    }

    .p-order-list .orders tr.full-row-link {
        display: block;
        background: #fff;
        border-bottom: 2px solid #eee;
        padding: 0.75rem 1.25rem;
    }

    .p-order-list .orders tr.full-row-link:hover {
        background: #fafafa;
    }

    .p-order-list .orders td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0;
        border-bottom: 1px solid #f5f5f5;
        font-size: 0.8125rem;
    }

    .p-order-list .orders td:last-child {
        border-bottom: none;
        padding-right: 0;
        text-align: left;
        justify-content: space-between;
    }

    .p-order-list .orders td:first-child {
        padding-left: 0;
        font-weight: 600;
        color: #444;
        font-size: 0.9375rem;
        border-bottom: 1px solid #eee;
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .p-order-list .orders td::before {
        content: attr(data-label);
        font-weight: 500;
        color: #888;
        font-size: 0.75rem;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    .p-invoice-list .filter.invoices .filter-options {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .p-invoice-list .filter.invoices .filter-options .option {
        margin: 0;
        width: 100%;
    }

    .p-invoice-list .filter.invoices .filter-options .option input[type="text"],
    .p-invoice-list .filter.invoices .filter-options .option select {
        width: 100%;
    }

    .p-invoice-list .filter.invoices .filter-options .actions {
        margin: 0;
        display: flex;
        gap: 0.625rem;
        justify-content: flex-end;
    }

    .p-invoice-list .filter.invoices .filter-options .actions .btn-reset-filter,
    .p-invoice-list .filter.invoices .filter-options .actions .btn-apply-filter {
        flex: 1;
        text-align: center;
    }

    .p-invoice-list .filter.invoices.active {
        max-height: 100%;
    }

    .p-invoice-list .invoices {
        display: block;
    }

    .p-invoice-list .invoices thead {
        display: none;
    }

    .p-invoice-list .invoices tbody {
        display: block;
    }

    .p-invoice-list .invoices tr.full-row-link {
        display: block;
        background: #fff;
        border-bottom: 2px solid #eee;
        padding: 0.75rem 1.25rem;
    }

    .p-invoice-list .invoices tr.full-row-link:hover {
        background: #fafafa;
    }

    .p-invoice-list .invoices td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0;
        border-bottom: 1px solid #f5f5f5;
        font-size: 0.8125rem;
    }

    .p-invoice-list .invoices td:first-child {
        padding-left: 0;
        font-weight: 600;
        color: #444;
        font-size: 0.9375rem;
        border-bottom: 1px solid #eee;
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .p-invoice-list .invoices td:last-child {
        border-bottom: none;
        padding-right: 0;
        text-align: left;
        justify-content: space-between;
    }

    .p-invoice-list .invoices td::before {
        content: attr(data-label);
        font-weight: 500;
        color: #888;
        font-size: 0.75rem;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    .p-order-details .order-summary {
        flex-direction: column;
        padding: 1.25rem;
        gap: 1.875rem;
    }

    .p-order-details .order-info {
        width: 100%;
    }

    .p-order-details .delivery-info {
        flex-basis: 100%;
        width: 100%;
    }

    /* Tracking table */
    .p-order-details .list.tracking {
        display: block;
    }

    .p-order-details .list.tracking thead {
        display: none;
    }

    .p-order-details .list.tracking tbody {
        display: block;
    }

    .p-order-details .list.tracking tr {
        display: block;
        background: #fff;
        border-bottom: 2px solid #eee;
        padding: 0.625rem 0;
    }

    .p-order-details .list.tracking td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem 0;
        border-bottom: 1px solid #f5f5f5;
        font-size: 0.8125rem;
    }

    .p-order-details .list.tracking td:last-child {
        border-bottom: none;
    }

    .p-order-details .list.tracking td::before {
        content: attr(data-label);
        font-weight: 500;
        color: #888;
        font-size: 0.75rem;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    .p-order-details .list.items {
        display: block;
    }

    .p-order-details .list.items thead {
        display: none;
    }

    .p-order-details .list.items tbody {
        display: block;
    }

    .p-order-details .list.items tr.full-row-expand {
        display: block;
        background: #fff;
        border-bottom: 2px solid #eee;
        padding: 0.75rem 1.25rem;
    }

    /* Hide the checkbox/toggle column */
    .p-order-details .list.items td.toggle-options {
        display: none;
    }

    .p-order-details .list.items td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.375rem 0;
        border-bottom: 1px solid #f5f5f5;
        font-size: 0.8125rem;
    }

    .p-order-details .list.items td:first-child {
        padding-left: 0;
    }

    .p-order-details .list.items td:last-child {
        border-bottom: none;
        padding-right: 0;
        text-align: left;
        justify-content: space-between;
    }

    .p-order-details .list.items td::before {
        content: attr(data-label);
        font-weight: 500;
        color: #888;
        font-size: 0.75rem;
        flex-shrink: 0;
        margin-right: 0.5rem;
        padding-top: 0.125rem;
    }

    /* Product name styling */
    .p-order-details .list.items td[data-label="Product"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .p-order-details .list.items td[data-label="Product"]::before {
        margin-bottom: 0.125rem;
    }

    /* Expandable product options */
    .p-order-details .list.items .expandable.product-options {
        width: 100%;
        padding: 0.5rem 0 0;
    }

    .p-order-details .list.items .expandable.product-options label {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    /* Total price row — highlight */
    .p-order-details .list.items td[data-label="Total price"] {
        font-weight: 600;
        color: #3e3e3e;
    }

    .p-order-details footer {
        padding: 1.25rem;
    }

    .p-order-details .amount.additional {
        align-items: stretch;
    }

    .p-order-details .amount .tax,
    .p-order-details .amount .shipping {
        justify-content: space-between;
        margin: 0.375rem 0;
    }

    .p-order-details .amount .tax span,
    .p-order-details .amount .shipping span {
        font-size: 0.8125rem;
    }

    .p-order-details .amount .tax span:last-child,
    .p-order-details .amount .shipping span:last-child {
        min-width: auto;
        text-align: right;
    }

    .p-order-details .grand-total.amount {
        justify-content: space-between;
        border-top: 2px solid #eee;
        margin-top: 0.625rem;
        padding-top: 0.75rem;
    }

    .p-order-details .grand-total span {
        font-size: 1rem;
    }

    .p-order-details .grand-total span:last-child {
        min-width: auto;
        text-align: right;
    }

    .p-order-details header {
        padding: 1.875rem 2.5rem;
    }

    /* Make sure this matches your actual parent wrapper */
    .p-invoice-details .orders,
    .woocommerce-account .orders {
        display: block;
    }

    .p-invoice-details .orders thead,
    .woocommerce-account .orders thead {
        display: none;
    }

    .p-invoice-details .orders tbody,
    .woocommerce-account .orders tbody {
        display: block;
    }

    .p-invoice-details .orders tr.full-row-link,
    .woocommerce-account .orders tr.full-row-link {
        display: block;
        background: #fff;
        border-bottom: 2px solid #eee;
        padding: 0.75rem 1.25rem;
    }

    .p-invoice-details .orders td,
    .woocommerce-account .orders td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0;
        border-bottom: 1px solid #f5f5f5;
        font-size: 0.8125rem;
    }

    .p-invoice-details .orders td:first-child,
    .woocommerce-account .orders td:first-child {
        padding-left: 0;
        font-weight: 600;
        color: #444;
        font-size: 0.9375rem;
        border-bottom: 1px solid #eee;
        padding-bottom: 0.5rem;
    }

    .p-invoice-details .orders td:last-child,
    .woocommerce-account .orders td:last-child {
        border-bottom: none;
        padding-right: 0;
        justify-content: space-between;
    }

    .p-invoice-details .orders td::before,
    .woocommerce-account .orders td::before {
        content: attr(data-label);
        font-weight: 500;
        color: #888;
        font-size: 0.75rem;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }

    /* Hide empty cells in total row */
    .p-invoice-details .orders tr:last-child td:empty,
    .woocommerce-account .orders tr:last-child td:empty {
        display: none;
    }

    .p-invoice-details .orders tr:last-child td:last-child,
    .woocommerce-account .orders tr:last-child td:last-child {
        justify-content: flex-end;
        font-size: 1rem;
        border-bottom: none;
    }

    .p-invoice-details .orders tr:last-child td:last-child::before,
    .woocommerce-account .orders tr:last-child td:last-child::before {
        display: none;
    }


    /* Make the entire filter block stack vertically */
    .filter.products-ordered .filter-options {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem; /* spacing between fields */
        padding: 1rem; /* optional padding */
    }

    /* Each input option takes full width */
    .filter.products-ordered .filter-options .option {
        margin: 0;
        width: 100%;
    }

    /* Labels above inputs for better mobile readability */
    .filter.products-ordered .filter-options .option label {
        display: block;
        font-size: 0.8125rem;
        margin-bottom: 0.25rem;
        font-weight: 500;
        color: #444;
    }

    /* Inputs and selects full width */
    .filter.products-ordered .filter-options .option input[type="text"],
    .filter.products-ordered .filter-options .option select {
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        box-sizing: border-box;
    }

    /* Actions (buttons) stack on mobile */
    .filter.products-ordered .filter-options .actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        margin: 0;
    }

    /* Buttons stretch full width and centered text */
    .filter.products-ordered .filter-options .actions .btn-apply-filter,
    .filter.products-ordered .filter-options .actions .btn-export-csv {
        flex: 1;
        width: 100%;
        text-align: center;
        padding: 0.625rem 0;
        font-size: 0.875rem;
    }

    /* Optional: adjust export button styling for mobile */
    .filter.products-ordered .filter-options .actions .btn-export-csv {
        display: block;
        text-decoration: none;
        background: #f5f5f5;
        color: #333;
        border-radius: 4px;
    }


}