/* 
   ALYYO APPAREL BUILDER - WORDPRESS COMPATIBILITY CSS (V7)
   Paste this into your theme's Custom CSS (Appearance > Customize > Additional CSS)
   to fix layout conflicts and ensure the builder looks perfect.
   
   NOTE: We are now using IFRAME ISOLATION and CSS PREFIXING.
   This CSS is a "Safety Shield" to ensure the wrapper and any leaked styles are handled.
*/

/* 1. Fix for massive SVG icons (Theme Pollution) */
.alyyo-app svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    max-width: 1.25rem !important;
    max-height: 1.25rem !important;
    display: inline-block !important;
    vertical-align: middle !important;
    fill: currentColor;
}

/* 2. Fix for larger feature icons */
.alyyo-app .w-6 { width: 1.5rem !important; max-width: 1.5rem !important; }
.alyyo-app .h-6 { height: 1.5rem !important; max-height: 1.5rem !important; }
.alyyo-app .w-12 { width: 3rem !important; max-width: 3rem !important; }
.alyyo-app .h-12 { height: 3rem !important; max-height: 3rem !important; }
.alyyo-app .w-16 { width: 4rem !important; max-width: 4rem !important; }
.alyyo-app .h-16 { height: 4rem !important; max-height: 4rem !important; }

/* 3. Fix for Next/Previous button visibility & states */
.alyyo-app button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #e5e7eb !important; /* gray-200 */
    color: #9ca3af !important; /* gray-400 */
    border: 1px solid #d1d5db !important;
}

.alyyo-app button:not(:disabled) {
    opacity: 1 !important;
    cursor: pointer !important;
}

/* 4. Force Tailwind colors (High Specificity) */
.alyyo-app .bg-blue-600 { background-color: #2563eb !important; }
.alyyo-app .text-white { color: #ffffff !important; }
.alyyo-app .bg-green-600 { background-color: #16a34a !important; }
.alyyo-app .text-blue-600 { color: #2563eb !important; }

/* 5. Iframe Container Styling */
#alyyo-app-root, #alyyo-theme-builder-wrap {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 6. Fix for checkbox/radio alignment */
.alyyo-app input[type="checkbox"],
.alyyo-app input[type="radio"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.5rem !important;
    cursor: pointer !important;
}
#alyyo-app-root input[type="radio"],
.alyyo-app input[type="checkbox"],
.alyyo-app input[type="radio"] {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* 6. Hide the landing page SVGs if they are still causing issues */
.alyyo-app-root .text-center svg,
.alyyo-app .text-center svg {
    display: none !important;
}