@charset "UTF-8";
/*
Theme Name: part66hub
Theme URI: https://part66hub.com/
Author: Sawban Shahin
Author URI: https://sawbanshahin.com/
Description: A custom WordPress theme for personal portfolio website, based on a UI design. Uses tailwind CSS.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: tailwind, responsive-layout, custom-theme
Text Domain: part66hub

This theme is designed to be fully responsive and optimized for performance. It includes custom templates for portfolio items, a blog section, and a contact page. The theme also supports custom widgets and has been built with SEO best practices in mind.
*/

body { font-family: 'DM Sans', sans-serif; background: #f5f6fa; }
    h1, h2, .brand { font-family: 'Sora', sans-serif; }

    .module-row { transition: box-shadow 0.2s; }
    .module-row:hover { box-shadow: 0 4px 24px rgba(99,102,241,0.10); }

    .plan-card { transition: border-color 0.18s, box-shadow 0.18s; }
    .plan-card:hover { border-color: #6366f1; box-shadow: 0 2px 16px rgba(99,102,241,0.13); }
    .plan-card.selected { border-color: #6366f1; background: #f0f1ff; }

    .btn-select { border: 1.5px solid #6366f1; color: #6366f1; background: #fff; border-radius: 8px; padding: 8px 22px; font-weight: 600; cursor: pointer; transition: background 0.16s, color 0.16s; }
    .btn-select:hover { background: #ede9fe; }
    .btn-selected { background: #6366f1; color: #fff; border-radius: 8px; padding: 8px 22px; font-weight: 600; cursor: pointer; border: none; }

    .badge-green { background: #d1fae5; color: #059669; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 2px 9px; }
    .badge-orange { background: #fef3c7; color: #d97706; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 2px 9px; }
    .badge-blue { background: #e0e7ff; color: #4338ca; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 2px 9px; }
    .badge-popular { background: #fff7ed; color: #ea580c; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 2px 9px; }
    .badge-recommended { background: #ede9fe; color: #7c3aed; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 2px 9px; }
    .badge-practice { background: #dcfce7; color: #16a34a; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 2px 9px; }

    .duration-btn { border: 1.5px solid #e5e7eb; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; background: #fff; color: #374151; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
    .duration-btn.active, .duration-btn:hover { border-color: #6366f1; background: #f0f1ff; color: #4338ca; }

    .checkout-btn { background: #6366f1; color: #fff; border-radius: 12px; font-size: 15px; font-weight: 700; padding: 14px 0; width: 100%; cursor: pointer; transition: background 0.15s; border: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .checkout-btn:hover { background: #4f46e5; }

    .why-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

    .step-circle { width: 28px; height: 28px; background: #6366f1; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }

    .radio-custom { width: 18px; height: 18px; border: 2px solid #d1d5db; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: border-color 0.15s; }
    .radio-custom.checked { border-color: #6366f1; }
    .radio-custom.checked::after { content:''; width: 9px; height: 9px; background: #6366f1; border-radius: 50%; }

    .bundle-banner { background: linear-gradient(90deg, #ede9fe 0%, #e0e7ff 100%); border: 1.5px dashed #a5b4fc; border-radius: 14px; }

    .module-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }