/* ── 1. Hide "What is PowerAnalyzer?" info block ─────────────────────────── */
#vue-power-analyzer .tw\:border-slate-200.tw\:rounded-lg.tw\:border.tw\:p-4 {
    display: none !important;
}

/* ── 2. Make ONLY the search card grid single column ────────────────────── */
#vue-power-analyzer .p-card .tw\:grid.tw\:gap-4.tw\:grid-cols-3 {
    grid-template-columns: 1fr !important;
}

#vue-power-analyzer .p-card .tw\:grid.tw\:gap-4.tw\:grid-cols-3 > .tw\:col-span-2 {
    grid-column: 1 / -1 !important;
}

/* ── 3. Center the search form row ──────────────────────────────────────── */
#vue-power-analyzer .p-card .tw\:max-md\:block.tw\:flex.tw\:flex-row.tw\:items-start.tw\:gap-5.tw\:mr-4 {
    justify-content: center !important;
    margin-right: 0 !important;
}

/* ── 4. Constrain card to match results section max-width ───────────────── */
#vue-power-analyzer .p-card {
    max-width: 1200px !important;
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

/* ── 5. Fix Enfold input styles leaking into autocomplete ───────────────── */
#vue-power-analyzer input {
    margin-bottom: 0 !important;
    width: auto !important;
    display: inline-flex !important;
    border-radius: 6px !important;
    font: 1em 'Muli', Helvetica, sans-serif !important;
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;    
}

/* PrimeVue inputtext keeps its own full styling */
#vue-power-analyzer input.p-inputtext {
    width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--p-inputtext-border-color) !important;
    background: var(--p-inputtext-background) !important;
    color: var(--p-inputtext-color) !important;
}

/* ── 6. Align Lookup button vertically with the input field ─────────────── */
#vue-power-analyzer .p-card .tw\:flex.tw\:items-start\!.tw\:h-full .p-button {
    margin-top: 35px !important;
}

/* ── 7. Fix autocomplete chip (Auto tag) padding and font size ──────────── */
#vue-power-analyzer .p-chip {
    padding: 7px !important;
}

#vue-power-analyzer .p-chip .p-chip-label {
    font-size: 13px !important;
}

/* Remove Enfold's focus box-shadow from autocomplete input */
#vue-power-analyzer input:focus {
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
}

/* Passive border for domain input */
#vue-power-analyzer input.p-inputtext {
    border: 1px solid #cbd5e1 !important;
}

/* Blue border on focus for domain input */
#vue-power-analyzer input.p-inputtext:focus {
    border: 1px solid #5d78ff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── 9. Outgoing/Incoming email section cards ───────────────────────────── */
#vue-power-analyzer .shadow-none.border.tw\:border-gray-200\!.tw\:p-\[17\.5px\]\!.tw\:rounded-2xl {
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
}

#vue-power-analyzer .shadow-none.border.tw\:border-gray-200\!.tw\:p-\[17\.5px\]\!.tw\:rounded-2xl:hover {
    background-color: #f8fafc !important;
    border-color: #60a5fa !important;
}

/* ── 10. Observations table — vertically center severity tag cell ────────── */
#vue-power-analyzer .p-datatable-tbody td {
    vertical-align: middle !important;
}

/* ── 11. Hide Vue's built-in popper — replaced by Shadow DOM toast ───────── */
#vue-power-analyzer .popper {
    display: none !important;
}

/* ── 12. QR/Send Now block — text styling ───────────────────────────────── */
#vue-power-analyzer .tw\:max-md\:hidden.tw\:font-normal.tw\:leading-\[32px\].tw\:text-2xl {
    margin-right: 4px !important;
    font-size: 21px !important;
    padding-right: 8px !important;
    line-height: 1.4 !important;
}

/* ── 13. SPF Lookup Tree node spacing ───────────────────────────────────── */
#vue-power-analyzer .spf-node {
    margin-left: 1.95rem !important;
}

#vue-power-analyzer .spf-node .tw\:py-3.tw\:ml-4 {
    padding-top: 0.2rem !important;
}

/* ── 14. SPF tree divider spacing ───────────────────────────────────────── */
#vue-power-analyzer .tw\:max-md\:hidden.tw\:mr-2 {
    margin-left: 0.5rem !important;
}

/* ── 15. BIMI phone logo overlay — correct breakpoint scoping ────────────── */

/* below 640px */
#vue-power-analyzer #bimiDetailsSection .tw\:top-23 {
    top: calc(0.25rem * 17) !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:lg\:top-25 {
        top: calc(0.25rem * 15) !important;
    }
}

/* lg: 1024px–1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:lg\:top-25 {
        top: calc(0.25rem * 19) !important;
    }
}

/* xl: 1280px–1535px */
@media (min-width: 1280px) and (max-width: 1535px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:xl\:top-23 {
        top: calc(0.25rem * 18) !important;
    }
}

/* 2xl: 1536px+ */
@media (min-width: 1536px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:2xl\:top-22 {
        top: calc(0.25rem * 16) !important;
    }
}

/* ── 15b. BIMI desktop preview logo overlay ─────────────────────────────── */

/* below 768px */
@media (max-width: 767px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:top-19.tw\:left-25 {
        top: calc(0.25rem * 14) !important;
        left: calc(0.25rem * 18) !important;
    }
}

/* 768px–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:md\:top-27.tw\:md\:left-52 {
        top: calc(0.25rem * 20) !important;
        left: calc(0.25rem * 39) !important;
    }
}

/* 1024px–1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:md\:top-27.tw\:md\:left-52 {
        top: calc(0.25rem * 23) !important;
        left: calc(0.25rem * 42) !important;
    }
}

/* 1280px–1535px */
@media (min-width: 1280px) and (max-width: 1535px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:xl\:top-23.tw\:xl\:left-45 {
        top: calc(0.25rem * 14) !important;
        left: calc(0.25rem * 27) !important;
    }
}

/* 1536px+ */
@media (min-width: 1536px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:2xl\:top-21.tw\:2xl\:left-45 {
        top: calc(0.25rem * 15) !important;
        left: calc(0.25rem * 33) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:md\:w-\[550px\] {
        width: 550px !important;
        min-width: 550px !important;
        flex-shrink: 0 !important;
    }
}

/* ── 17. BIMI desktop preview container — fix left position 768px–1023px ─── */
@media (min-width: 768px) and (max-width: 1023px) {
    #vue-power-analyzer #bimiDetailsSection .tw\:md\:top-8.tw\:md\:left-115 {
        left: calc(0.25rem * 70) !important;
    }
}

/* ── 19. DKIM error message margin top ──────────────────────────────────── */
#vue-power-analyzer #dkimDetailsSection .p-message {
    margin-top: 1rem !important;
}

@media (max-width: 768px) {
    /* The copy button wrapper — always has these stable attributes */
    [data-pc-name="button"][aria-label="Copy"] {
        position: relative;
        z-index: 10;
    }

    /* Its parent inline-block wrapper */
    [data-pc-name="button"][aria-label="Copy"] {
        pointer-events: auto;
    }
}

/* ── 20. Receive Report form — phone code addon height fix ───────────────── */
.p-dialog [inputid="phone"].p-inputgroup {
    align-items: center !important;
}

.p-dialog [inputid="phone"].p-inputgroup .p-inputgroupaddon {
    height: 37px !important;
    align-self: center !important;
    overflow: hidden !important;
}

.p-dialog [inputid="phone"].p-inputgroup .p-select {
    height: 37px !important;
}

/* ── 21. Receive Report dialog — neutralize Enfold input styles ─────────── */
.p-dialog input#phone {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border: 1px solid var(--p-inputtext-border-color) !important;
    padding: 4px 12px !important;
    font: inherit !important;
    color: inherit !important;
    background: var(--p-inputtext-background) !important;
    width: 100% !important;
    display: block !important;    
    outline: none !important;
}

/* ── 22. Search card — mobile max-width and centering ───────────────────── */
@media (max-width: 767px) {
    #vue-power-analyzer .p-card .tw\:col-span-2 {
        max-width: 36rem !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Reorder: Domain input first, DKIM selectors second, Lookup button last */
    #vue-power-analyzer .p-card .tw\:max-md\:block.tw\:flex.tw\:flex-row.tw\:items-start.tw\:gap-5.tw\:mr-4 {
        display: flex !important;
        flex-direction: column !important;
    }

    #vue-power-analyzer .p-card .tw\:flex.tw\:flex-col.tw\:gap-2.tw\:max-md\:w-full.tw\:w-1\/2:first-child {
        order: 1 !important;
    }

    #vue-power-analyzer .p-card .tw\:flex.tw\:flex-col.tw\:gap-2.tw\:max-md\:w-full.tw\:w-1\/2:last-child {
        order: 3 !important;
    }

    #vue-power-analyzer .p-card .tw\:flex.tw\:items-start\!.tw\:h-full {
        order: 4 !important;
        width: 100% !important;
    }

    #vue-power-analyzer .p-card .tw\:flex.tw\:items-start\!.tw\:h-full .p-button {
        width: 100% !important;
        margin-top: 0.5rem !important;
    }
}

/* ── 13b. SPF tree node spacing — 768px–1023px ──────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    #vue-power-analyzer .spf-node {
        margin-left: 1.75rem !important;
    }
}

@media (max-width: 768px) {
    #vue-power-analyzer .spf-node {
        margin-left: 1.75rem !important;
    }
}

@media (max-width: 767px) {
    /* ── SPF tree tags row — all levels including root ───────────────────── */
    #vue-power-analyzer [data-spf-record] .tw\:pt-2 {
        padding-top: calc(var(--tw-spacing) * 4) !important;
    }

    /* ── SPF tree copy icon — all levels including root ──────────────────── */
    #vue-power-analyzer [data-spf-record] .tw\:cursor-pointer {
        margin-right: 4px !important;
    }
}

@media (max-width: 767px) {
    /* ── Score card — center text on mobile ─────────────────────────────── */
    #vue-power-analyzer .tw\:col-span-2.tw\:bg-gray-50\!.tw\:rounded-2xl.tw\:p-5.tw\:border-gray-200\! {
        text-align: center !important;
    }

    /* ── Score image — 100px on mobile ──────────────────────────────────── */
    #vue-power-analyzer .tw\:w-\[80px\].tw\:h-\[80px\] {
        width: 100px !important;
        height: 100px !important;
    }

    /* ── Score header row — padding-bottom on mobile ─────────────────────── */
    #vue-power-analyzer .tw\:max-md\:block.tw\:flex.tw\:items-center.tw\:gap-2.tw\:justify-between {
        padding-bottom: 10px !important;
    }

    /* ── Score percentage label — padding-bottom on mobile ───────────────── */
    #vue-power-analyzer .tw\:font-bold.tw\:m-0.tw\:text-\[32px\] {
        padding-bottom: 10px !important;
    }

    /* ── Overview header — center all content on mobile ─────────────────── */
    #vue-power-analyzer .tw\:max-md\:block.tw\:flex.tw\:justify-between.tw\:items-center {
        text-align: center !important;
    }

    #vue-power-analyzer .tw\:max-md\:block.tw\:flex.tw\:justify-between.tw\:items-center .tw\:max-md\:block.tw\:gap-\[15\.5px\].tw\:flex {
        justify-content: center !important;
    }

    #vue-power-analyzer .tw\:flex.tw\:items-center.tw\:gap-2.tw\:max-md\:mb-4 {
        justify-content: center !important;
    }
}

/* ── Search card — match SPF/BIMI pill style ─────────────────────────────── */
#vue-power-analyzer > .p-card {
    border-radius: 6.2rem !important;
    box-shadow: 0px 4px 25px 0px #1538771a !important;
    padding: 3rem 3rem !important;
}

#vue-power-analyzer > .p-card > .p-card-body{
    padding-top: 0px !important;
}

#vue-power-analyzer {
    margin-top: -100px !important;
}

@media (min-width: 1024px) {
    #vue-power-analyzer .p-card {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 767px) {
    #vue-power-analyzer>.p-card {
        border-radius: 1.5rem !important;
        padding: 1.5rem !important;        
    }

    #vue-power-analyzer>.p-card {
        border-radius: 14vw !important;
    }
}