/* Print Styles */
@media print {
   body * {
        visibility: hidden;
    }

    .fiveprayer__printer,
    .fiveprayer__printer * {
        visibility: visible;
    }

    .fiveprayer__printer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    @page {
        margin: 5mm !important;
    }

    #fiveprayer-no-print,
    .wp-block-post-title,
    .wp-container-6,
    .fiveprayer__printer_option select,
    .wp-block-image,
    aside,
    .widget-area.sidebar-primary {
        display: none;
    }

    .entry-content,
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6,
    .wp-block-image,
    p {
        font-size: 0px !important;
    }

    body * {
        font-weight: 400 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        height: 0 !important;
        white-space: nowrap !important;
    }

    body:has(.fiveprayer__printer) {
        white-space: nowrap !important;
        background-color: transparent !important;
        max-width: inherit !important;
    }

    .fiveprayer__printer * {
        white-space: nowrap !important;
        height: fit-content !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 8px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Override WordPress/Gutenberg styles that may interfere with printing */
    @media print {
        :where(.wp-site-blocks) > :first-child,
        .wp-site-blocks > :first-child,
        body > :first-child {
            height: auto !important;
            min-height: auto !important;
            max-height: none !important;
            margin-block-start: auto !important;
        }
    }

    .fiveprayer__printer .printer_line {
        font-size: 12px !important;
        white-space: wrap !important;
    }

    .next-prayer-notice {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .fiveprayer__noDisplay {
        display: block;
        margin-bottom: 10px !important;
    }

    .fiveprayer__printer {
        width: 100% !important;
        max-width: inherit !important;
    }

    #fiveprayer-div-to {
        width: 100% !important;
        max-width: inherit !important;
    }

    #fiveprayer-div-to-print {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .fiveprayer__printer th,
    .fiveprayer__printer td,
    .FP_DairyPrayer_ th,
    .FP_DairyPrayer_ td {
        padding: 0 !important;
        padding-inline: 7px !important;
        padding-block: 3px !important;
        border: var(--border-size) var(--border-style) var(--clr-border) !important;
        text-align: center !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    .fiveprayer__tbhead {
        width: 100% !important;
        background: var(--bg-first) !important;
        color: var(--clr-first) !important;
    }

    .fiveprayer__tbmonthfirst {
        background-color: var(--bg-first) !important;
        color: var(--clr-first) !important;
    }

    #fiveprayer-tbmonth-second {
        background-color: var(--bg-second) !important;
        color: var(--clr-second) !important;
    }

    .fiveprayer__printer tbody tr:nth-child(even) {
        background-color: var(--bg-even) !important;
        color: var(--clr-even) !important;
    }

    .fiveprayer__printer tbody tr:nth-child(odd) {
        background-color: var(--bg-odd) !important;
        color: var(--clr-odd) !important;
    }

    .FP_DairyPrayer_ tbody tr:nth-child(even) {
        background-color: var(--bg-even) !important;
        color: var(--clr-even) !important;
    }

    .FP_DairyPrayer_ tbody tr:nth-child(odd) {
        background-color: var(--bg-odd) !important;
        color: var(--clr-odd) !important;
    }

    .fiveprayer__today_row {
        background-color: var(--bg-highlight) ;
        color: var(--clr-highlight) ;
    }

    .FP_DairyPrayer_ {
        border-collapse: collapse !important;
        width: fit-content !important;
    }

    .printer-page-container {
        display: grid !important;
        grid-template-columns: repeat(3,2fr) !important;
        grid-gap: 30px !important;
        margin-bottom: 1px !important;
        justify-content: stretch !important;
    }

    .left-printer {
        margin: 0 auto !important;
    }

    .med-printer {
        padding-inline: 48px !important;
        text-align: center !important;
    }

    .med-printer img {
        width: 160px !important;
        height: 130px !important;
    }

    .right-printer {
        margin: 0 auto !important;
        padding-left: 0.5rem !important;
    }

    /* Fix .main class transform that shifts print layout */
    .main {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        transform: none !important;
        transform: translate3d(0px, 0px, 0px) !important;
    }
}

/* Screen Styles */
@media screen {
    .printer-page-container {
        display: grid;
        grid-template-columns: repeat(3,2fr);
        grid-gap: 0px;
        align-items: stretch;
        justify-content: stretch;
    }

    .printer-page-container span {
        height: 0;
    }

    .med-printer {
        padding-inline: 48px;
        text-align: center;
    }

    .med-printer img {
        width: 160px;
        height: 130px;
    }

    .fiveprayer__noDisplay,
    #printerdisplay {
        display: none;
    }

    #fiveprayer-div-to {
        border-collapse: collapse;
        max-width: inherit;
        margin: 0;
    }

    #fiveprayer-div-to-print {
        width: 100%;
        border-collapse: collapse;
    }

    .fiveprayer__printer_option {
        display: flex;
        justify-content: space-between;
    }

    .fiveprayer__printer_option select {
        padding: 9px;
    }

    .fiveprayer_top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .fiveprayer_top select {
        width: 200px !important;
        flex-shrink: 0 !important;
    }

    .fiveprayer_top .fiveprayer__clickPrint {
        width: auto !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    html body .fiveprayer_top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .fiveprayer__clickPrint {
        padding: 9px;
        cursor: pointer;
        width: auto;
    }

    .fiveprayer__printer_option form {
        display: contents;
    }

    #fiveprayer-no-print table th {
        border: none;
    }

    .fiveprayer__printer thead {
        vertical-align: 0;
    }

    .fiveprayer__printer th,
    .fiveprayer__printer td,
    .FP_DairyPrayer_ th,
    .FP_DairyPrayer_ td {
        padding: 0;
        padding-inline: 3px;
        padding-block: 3px;
        border: var(--border-size) var(--border-style) var(--clr-border);
        text-align: center;
    }

    .fiveprayer__printer th[style*="border"],
    .fiveprayer__printer td[style*="border"],
    .FP_DairyPrayer_ th[style*="border"],
    .FP_DairyPrayer_ td[style*="border"] {
        border: var(--border-size) var(--border-style) var(--clr-border);
    }

    .fiveprayer__tbhead {
        width: 100%;
        background: var(--bg-first);
        color: var(--clr-first);
    }

    .fiveprayer__today_row {
        background-color: var(--bg-highlight) !important;
        color: var(--clr-highlight) !important;
    }

    .fiveprayer__tbmonthfirst {
        background-color: var(--bg-first);
        color: var(--clr-first);
    }

    #fiveprayer-tbmonth-second {
        background-color: var(--bg-second);
        color: var(--clr-second);
    }

    .fiveprayer__printer tbody tr:nth-child(even) {
        background-color: var(--bg-even);
        color: var(--clr-even);
    }

    .fiveprayer__printer tbody tr:nth-child(odd) {
        background-color: var(--bg-odd);
        color: var(--clr-odd);
    }

    .FP_DairyPrayer_ tbody tr:nth-child(even) {
        background-color: var(--bg-even);
        color: var(--clr-even);
    }

    .FP_DairyPrayer_ tbody tr:nth-child(odd) {
        background-color: var(--bg-odd);
        color: var(--clr-odd);
    }

    .fiveprayer-select-print {
        display: flex;
        padding: 0;
        margin: 0;
    }

    .fiveprayer-select-print form {
        margin-bottom: 0;
    }

    .fiveprayer-select-print select,
    #fiveprayer-click-print {
        border: none;
        height: 100%;
    }

    .fiveprayer-select-print select {
        border: none;
        align-self: center;
    }

    .fiveprayer-select-print .fiveprayer__clickPrint {
        border: none;
    }

    .show-highlight {
        background: var(--bg-highlight);
        color: var(--clr-highlight);
    }

    .FP_DairyPrayer_ {
        border-collapse: collapse;
        width: 100%;
    }

    .FP_DairyPrayer_ th,
    .FP_DairyPrayer_ td {
        padding: 5px;
        border-width: 0 1px 1px 0;
        border: var(--border-size) var(--border-style) var(--clr-border);
        text-align: center;
    }

    .FP_DairyPrayerf_ th,
    .FP_DairyPrayerf_ td {
        padding: 10px;
    }

    .fiveprayer__tbhead {
        background: var(--bg-first);
        color: var(--clr-first);
    }

    .fp__highlight {
        background-color: var(--bg-highlight);
        color: var(--clr-highlight);
    }

    .next-prayer-notice {
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    /* .fiveprayer__iqamah_next {
        font-size: 18px;
        color: var(--clr-second);
        font-weight: 700;
    }

    .fiveprayer__iqamah_time {
        padding: 0px;
        font-size: 40px;
        color: var(--clr-second);
        font-weight: 700;
    } */
}