@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* --- Scoped Isolation --- */
/* The ID #eye-drop-tool ensures these rules only apply to your tool */

#eye-drop-tool {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
    line-height: 1.5;

    /* --- CENTERING FIXES --- */
    
    /* 1. Ensure the section fills the width but centers itself if constrained */
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;

    /* 2. Force the content inside (the calculator) to sit in the center */
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* FIX: Force borders to show up even if WordPress Theme tries to hide them */
#eye-drop-tool input, 
#eye-drop-tool select, 
#eye-drop-tool .drop-card, 
#eye-drop-tool .bg-white {
    border-style: solid !important;
}

/* Cap Colors */
.cap-teal { background-color: #2dd4bf !important; border-color: #14b8a6 !important; }
.cap-yellow { background-color: #facc15 !important; border-color: #eab308 !important; }
.cap-red { background-color: #f87171 !important; border-color: #ef4444 !important; }
.cap-pink { background-color: #f472b6 !important; border-color: #ec4899 !important; }
.cap-tan { background-color: #d6d3d1 !important; border-color: #a8a29e !important; }
.cap-grey { background-color: #9ca3af !important; border-color: #6b7280 !important; }
.cap-green { background-color: #4ade80 !important; border-color: #22c55e !important; }
.cap-blue { background-color: #60a5fa !important; border-color: #3b82f6 !important; }
.cap-orange { background-color: #fb923c !important; border-color: #f97316 !important; }
.cap-purple { background-color: #a855f7 !important; border-color: #9333ea !important; }
.cap-white { background-color: #ffffff !important; border-color: #d1d5db !important; }

/* Icon Selection */
.eye-btn.selected {
    background-color: #dbeafe !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
}

/* --- PRINT STYLES --- */
@media print {
    @page { margin: 0.5cm; size: auto; }
    
    body * {
        visibility: hidden; 
    }
    
    #eye-drop-tool, #eye-drop-tool * {
        visibility: visible; 
    }

    /* CHANGE 1: Target the ID specifically to override the border settings */
    #eye-drop-tool #handout {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background-color: white !important;
        
        /* This removes the dark border and rounded corners on print */
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .no-print { display: none !important; }
    
    /* You can leave the rest as is, or replace the .printable-area block with this */
    .printable-area {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .drop-card {
        break-inside: avoid;
        border: 1px solid #e5e7eb !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .delete-btn { display: none !important; }
}