/* Style for the disabled button */
button:disabled {
    background-color: #d1d5db; /* This is approximately Tailwind's bg-gray-400 */
    cursor: not-allowed; /* This will show a "not allowed" cursor when hovered */
    opacity: 0.7; /* Adding a touch of opacity often helps indicate "disabled" state visually */
}

/* Optional: Change the color on hover even when disabled (this is up to your design preference) */
button:disabled:hover {
    background-color: #d1d5db; 
}


/* Scoped styles for manufacturer rich HTML content */
.manufacturer-description {
    color: #111827; /* Tailwind gray-900-ish for text */
}

.manufacturer-description h1,
.manufacturer-description h2,
.manufacturer-description h3,
.manufacturer-description h4 {
    color: #0f5132; /* deep green to match brand */
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

.manufacturer-description p {
    margin: 0 0 1rem 0; /* increase paragraph spacing */
}

.manufacturer-description p + p {
    margin-top: 0.5rem; /* extra space between consecutive paragraphs */
}

.manufacturer-description a {
    color: #16a34a; /* light green (Tailwind green-600) */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.manufacturer-description a:hover,
.manufacturer-description a:focus {
    color: #059669; /* slightly darker green on hover (green-600 to green-700) */
}

.manufacturer-description ul,
.manufacturer-description ol {
    padding-left: 1.25rem; /* indent lists */
    margin: 0.75rem 0 1rem 0; /* give lists breathing room */
}

.manufacturer-description li {
    margin: 0.25rem 0; /* space between list items */
}

.manufacturer-description br {
    line-height: 2; /* soften <br> spacing */
}

/* Optional: soft card background if content is long */
.manufacturer-description {
    background: linear-gradient(180deg, rgba(240,253,244,0.5) 0%, rgba(255,255,255,0) 40%);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}

/* Manufacturer description on dark gradient backgrounds (machine shop) */
.manufacturer-description-dark p {
    margin-bottom: 0.75rem; /* better paragraph spacing */
}
.manufacturer-description-dark p:last-child {
    margin-bottom: 0;
}
.manufacturer-description-dark,
.manufacturer-description-dark p,
.manufacturer-description-dark span,
.manufacturer-description-dark li,
.manufacturer-description-dark div {
    color: #e5e7eb !important; /* text-gray-200 — forced to override CMS inline styles */
}

/* Collapsible manufacturer description — styles moved inline to machine-shop-landing.htm */
.manufacturer-description-dark a {
    color: #86efac !important; /* green-300 — visible link on dark bg */
    text-decoration: underline;
    text-underline-offset: 2px;
}
.manufacturer-description-dark a:hover,
.manufacturer-description-dark a:focus {
    color: #bbf7d0 !important; /* green-200 on hover */
}
.manufacturer-description-dark h1,
.manufacturer-description-dark h2,
.manufacturer-description-dark h3,
.manufacturer-description-dark h4 {
    color: #ffffff !important;
}

/* Accessibility: improved colour-contrast utility classes */
.a11y-price { color: #2d6a0e; } /* WCAG AA on light backgrounds (4.7:1 on #EBECED) */
.a11y-btn-qty { color: #1a1a1a; background: #e5e7eb; } /* high-contrast quantity +/- */
.a11y-btn-qty:hover, .a11y-btn-qty:focus { background: #d1d5db; }

/* Screen reader only utility (used for skip links, form labels) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only:focus, .focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* Mobile responsive fixes — prevent horizontal overflow on spares/model pages */
@media (max-width: 767px) {
    /* Constrain all containers to viewport width */
    .container {
        max-width: 100vw;
        overflow-x: clip;
    }

    /* Compact action buttons inside stacked table cells */
    td:nth-of-type(5) form {
        flex-wrap: wrap;
    }

    td:nth-of-type(5) button[type="submit"],
    td:nth-of-type(5) a {
        white-space: normal;
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }

    /* Prevent response spans from forcing overflow */
    td span[id^="response_"] {
        white-space: normal;
    }

    /* Cart table mobile styles are in default.htm inline <style> */
}

/* Spares inline cart confirmation (tick + cart icon) */
.spares-cart-added {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    animation: sparesAlertPop 0.35s ease-out;
}
.cart-confirm-tick-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: #dcfce7;
    border-radius: 50%;
    animation: sparesCheckBounce 0.4s ease-out 0.1s both;
}
.cart-confirm-cart-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #166534;
    transition: transform 0.2s;
}
.cart-confirm-cart-sm:hover {
    transform: scale(1.15);
}
@keyframes sparesAlertPop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes sparesCheckBounce {
    0%   { transform: scale(0) rotate(-45deg); }
    60%  { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}

/* Hide empty paragraphs (e.g. <p><br></p>) from AI-generated descriptions */
.prose p:has(> br:only-child) {
    display: none;
}