/* =============================================
   SharpMaster - Knife Sharpening Website
   Packaging Page Specific Styles
   ============================================= */

/* =============================================
   Checklist Styles
   ============================================= */

.checklist {
    list-style: none;
    padding: 0;
}

.checklist li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    border-bottom: 1px solid #eee;
}

.checklist li:last-child {
    border-bottom: none;
}

.checklist li::before {
    content: "☐";
    position: absolute;
    left: 0;
    color: #e67e22;
    font-size: 1.2rem;
}

/* =============================================
   Materials List
   ============================================= */

.materials-list {
    list-style: disc;
    padding-left: 1.5rem;
}

.materials-list li {
    padding: 0.5rem 0;
}

/* =============================================
   Step by Step Instructions
   ============================================= */

.step-by-step {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step {
    background-color: #fafafa;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #e67e22;
}

.step h4 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.step p {
    margin-bottom: 0;
    color: #555;
}

/* =============================================
   Tips List
   ============================================= */

.tips-list {
    list-style: none;
    padding: 0;
}

.tips-list li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.tips-list li::before {
    content: "💡";
    position: absolute;
    left: 0;
}

/* =============================================
   Don't List
   ============================================= */

.dont-list {
    list-style: none;
    padding: 0;
}

.dont-list li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: #e74c3c;
}

.dont-list li::before {
    content: "⛔";
    position: absolute;
    left: 0;
}

/* =============================================
   Image Placeholder
   ============================================= */

.image-placeholder {
    background-color: #e0e0e0;
    border-radius: 10px;
    padding: 3rem;
    text-align: center;
    margin: 2rem 0;
}

.placeholder-text {
    color: #888;
}

.placeholder-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.placeholder-note {
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 0.5rem;
}

/* =============================================
   Packaging Page Responsive Styles
   ============================================= */

/* Tablet Styles */
@media (min-width: 768px) {
    .step-by-step {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .step {
        margin-bottom: 0;
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .step-by-step {
        grid-template-columns: repeat(2, 1fr);
    }
}