/* Zakat Calculator Styles */

/* Basic styling */
body {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* Input field styling */
input[type="number"] {
    appearance: textfield;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

/* Focus states */
input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}

/* Button hover effects */
button:hover {
    transform: translateY(-1px);
}

/* Collapsible content */
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* PDF/Print specific styles */
@media print {
    /* Hide elements that shouldn't appear in PDF */
    .print-hide {
        display: none !important;
    }

    /* Hide main content and show PDF template */
    #main-content {
        display: none !important;
    }

    #pdf-template {
        display: block !important;
        position: static !important;
        background: white !important;
        font-family: Arial, sans-serif !important;
        max-width: 750px !important;
        margin: 0 auto !important;
        padding: 15px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
        page-break-before: avoid !important;
        height: auto !important;
        max-height: none !important;
    }

    body {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure single page */
    #pdf-template h1 {
        font-size: 18px !important;
    }

    #pdf-template h3 {
        font-size: 13px !important;
    }

    #pdf-template h4 {
        font-size: 12px !important;
    }

    #pdf-table {
        font-size: 10px !important;
    }

    #pdf-table th,
    #pdf-table td {
        padding: 4px !important;
    }

    /* Prevent page breaks in PDF content */
    #pdf-template div,
    #pdf-template table,
    #pdf-template p,
    #pdf-template h1,
    #pdf-template h2,
    #pdf-template h3,
    #pdf-template h4 {
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
        page-break-before: avoid !important;
    }

    /* Reduce margins and spacing for single page fit */
    #pdf-template > div {
        margin-bottom: 10px !important;
    }

    /* Ensure table stays together */
    #pdf-table {
        page-break-inside: avoid !important;
        margin-bottom: 10px !important;
    }

    /* Reduce footer margin */
    #pdf-template .footer-div {
        margin-top: 5px !important;
    }
}

.collapsible-content.open {
    max-height: 1000px;
}

/* Status indicators */
.status-below-nisab {
    color: #6b7280;
}

.status-above-nisab {
    color: #059669;
}

/* Calculation results */
.calculation-result {
    font-weight: 600;
    font-size: 1.125rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Sticky summary box */
.zakat-summary {
    position: sticky;
    top: 1rem;
}

/* Smooth transitions */
.transition-all {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Spin animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Modal transparent scrollbar */
.modal-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.modal-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.modal-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.modal-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Islamic geometric background for modal */
.modal-geometric-bg {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(20, 184, 166, 0.03) 0%, transparent 50%),
        linear-gradient(45deg, rgba(16, 185, 129, 0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(20, 184, 166, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(16, 185, 129, 0.02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(20, 184, 166, 0.02) 75%);
    background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
    background-position: 0 0, 10px 10px, 0 0, 0 0, 0 0, 10px 10px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Custom select dropdown styling */
.custom-select {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.custom-select::-ms-expand {
    display: none;
}

.custom-select-wrapper {
    position: relative;
}

.custom-select-wrapper::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #6b7280;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.custom-select:focus + .custom-select-wrapper::after,
.custom-select-wrapper:hover::after {
    border-top-color: #059669;
}

.custom-select-wrapper.open::after {
    transform: translateY(-50%) rotate(180deg);
    border-top-color: #059669;
}

.custom-select:focus {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}