/* =============================================
   lharfa.ma mobile polish layer
   Loaded after page-local styles to keep phones usable across the static app.
   ============================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

img, svg, video, canvas, iframe {
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    max-width: 100%;
}

@media (max-width: 1024px) {
    body {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .navbar {
        position: sticky !important;
        top: 0 !important;
        padding: 8px 0 !important;
    }

    .nav-container,
    .navbar .container {
        min-height: 56px !important;
        padding-inline: 14px !important;
    }

    .logo {
        max-width: calc(100vw - 86px) !important;
        min-width: 0 !important;
        font-size: clamp(16px, 4.4vw, 22px) !important;
        gap: 8px !important;
        white-space: nowrap !important;
    }

    .logo img,
    .auth-logo img,
    .footer-logo-official img {
        height: 34px !important;
        flex: 0 0 auto !important;
    }

    .logo span,
    .auth-logo span,
    .footer-logo-official span {
        min-width: 0 !important;
    }

    .menu-toggle {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 44px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: white !important;
    }

    .nav-links {
        width: min(88vw, 340px) !important;
        max-width: 340px !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    [dir="rtl"] .nav-links {
        right: min(-88vw, -340px) !important;
    }

    [dir="rtl"] .nav-links.active {
        right: 0 !important;
    }

    .nav-link,
    .nav-auth-btns a,
    .nav-auth-btns button,
    .lang-btn {
        min-height: 46px !important;
        touch-action: manipulation !important;
    }

    .mobile-bottom-nav,
    .mobile-bottom-nav-elite {
        height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        z-index: 30000 !important;
    }
}

@media (max-width: 768px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 16px !important;
    }

    .premium-hero,
    .hero,
    .hero-section {
        min-height: auto !important;
        padding: 72px 0 48px !important;
        overflow: hidden !important;
    }

    .hero-inner,
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-badge,
    .section-tag-premium {
        max-width: 100% !important;
        white-space: normal !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }

    .hero-title,
    .premium-hero h1,
    .hero h1 {
        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        max-width: 100% !important;
        margin-bottom: 18px !important;
    }

    .hero-description,
    .premium-hero p,
    .hero p {
        font-size: clamp(15px, 4.2vw, 18px) !important;
        line-height: 1.65 !important;
        max-width: 100% !important;
        margin-bottom: 28px !important;
    }

    .elite-search-panel,
    .premium-search-box,
    .hero-search-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
        gap: 12px !important;
        border-radius: 22px !important;
        overflow: visible !important;
    }

    .elite-dropdown,
    .search-field,
    .search-input-group,
    .hero-search-container > *,
    .premium-search-box > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .elite-dropdown-trigger,
    .search-field,
    .search-input-group {
        min-height: 58px !important;
        padding: 12px 16px !important;
        border-radius: 16px !important;
    }

    .elite-dropdown-menu {
        max-height: 260px !important;
        z-index: 40000 !important;
    }

    .elite-search-panel button,
    .hero-search-btn,
    .search-btn-elite,
    .hero-search-container .btn-primary {
        width: 100% !important;
        min-height: 58px !important;
        justify-content: center !important;
        padding: 0 18px !important;
        border-radius: 16px !important;
        font-size: 16px !important;
    }

    .hero-trust,
    .hero-trust-elite {
        width: 100% !important;
        gap: 10px !important;
        margin-top: 28px !important;
    }

    .elite-trust-chip,
    .trust-item {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 16px !important;
        padding: 12px 14px !important;
    }

    .section {
        padding: 52px 0 !important;
    }

    .section-header-premium,
    .section-header {
        margin-bottom: 34px !important;
    }

    .section-header-premium h2,
    .section-header h2,
    h2 {
        font-size: clamp(26px, 7vw, 34px) !important;
        line-height: 1.22 !important;
        letter-spacing: 0 !important;
    }

    .how-it-works-grid,
    .why-us-grid,
    .footer-grid,
    .newsletter-grid,
    .contact-grid,
    .dashboard-grid,
    .stat-grid,
    .stat-grid-v3,
    .quick-view-grid,
    .form-grid,
    .role-selector,
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    .services-grid,
    .services-grid-premium,
    .artisans-grid,
    .product-grid,
    [style*="grid-template-columns: repeat(auto-fit"],
    [style*="grid-template-columns: repeat(auto-fill"] {
        grid-template-columns: 1fr !important;
    }

    .elite-stats-grid,
    .stats-grid-premium,
    .stats-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .elite-stat-card,
    .stat-card,
    .glass-card,
    .artisan-card-premium,
    .testimonial-card,
    .service-chip {
        padding: 22px 16px !important;
        border-radius: 20px !important;
        min-width: 0 !important;
    }

    .newsletter-card-elite {
        display: flex !important;
        flex-direction: column !important;
        padding: 34px 18px !important;
        border-radius: 26px !important;
        text-align: center !important;
    }

    .glass-input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        border-radius: 22px !important;
        gap: 8px !important;
    }

    .elite-input,
    .glass-input-wrapper input {
        width: 100% !important;
        min-height: 48px !important;
        text-align: center !important;
    }

    .btn-elite-subscribe {
        width: 100% !important;
        min-height: 48px !important;
    }

    .elite-footer,
    footer {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .footer-logo-official {
        justify-content: center !important;
        text-align: center !important;
    }

    .auth-page-wrapper {
        padding: 34px 12px 96px !important;
        align-items: flex-start !important;
    }

    .premium-auth-card,
    .auth-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 28px 16px !important;
        border-radius: 24px !important;
    }

    .auth-header {
        margin-bottom: 28px !important;
    }

    .auth-logo {
        font-size: clamp(22px, 7vw, 28px) !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    .auth-title {
        font-size: clamp(25px, 8vw, 32px) !important;
        line-height: 1.2 !important;
    }

    .role-selector {
        gap: 12px !important;
        margin-bottom: 26px !important;
    }

    .role-card {
        min-height: 96px !important;
        padding: 18px 14px !important;
        border-radius: 18px !important;
    }

    .premium-form-group,
    #cityContainer {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    .premium-input-box input,
    .premium-input-box select,
    input,
    select,
    textarea {
        min-height: 52px !important;
        font-size: 16px !important;
    }

    .custom-checkbox {
        align-items: flex-start !important;
        line-height: 1.5 !important;
    }

    .register-submit-btn,
    .btn,
    button[type="submit"] {
        min-height: 52px !important;
        white-space: normal !important;
    }

    .table-container,
    .premium-table,
    table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .modal-box,
    .modal-content,
    .cart-panel {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 32px) !important;
        overflow-y: auto !important;
        border-radius: 22px !important;
    }

    .dashboard-layout,
    .dashboard-container,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-inline: 12px !important;
    }

    .sidebar,
    .artisan-sidebar {
        width: min(86vw, 320px) !important;
        max-width: 320px !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding-inline: 12px !important;
    }

    .premium-hero,
    .hero,
    .hero-section {
        padding-top: 56px !important;
    }

    .hero-title,
    .premium-hero h1,
    .hero h1 {
        font-size: clamp(28px, 10vw, 34px) !important;
    }

    .hero-description,
    .premium-hero p,
    .hero p {
        font-size: 15px !important;
    }

    .elite-stats-grid,
    .stats-grid-premium,
    .stats-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding-inline: 0 !important;
    }

    .elite-stat-card,
    .stat-card {
        min-height: 142px !important;
        padding: 18px 10px !important;
        border-radius: 16px !important;
    }

    .elite-stat-icon,
    .stat-icon {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }

    .elite-stat-icon i,
    .stat-icon i {
        width: 20px !important;
        height: 20px !important;
    }

    .elite-stat-number,
    .stat-number {
        font-size: 21px !important;
        line-height: 1.1 !important;
        margin-bottom: 6px !important;
    }

    .elite-stat-label,
    .stat-label {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .services-grid,
    .services-grid-premium {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .service-chip,
    .services-grid-premium > *,
    .services-grid > * {
        min-height: 128px !important;
        padding: 16px 8px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
    }

    .chip-icon,
    .service-chip i,
    .services-grid-premium > * i,
    .services-grid > * i {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        border-radius: 14px !important;
    }

    .service-chip h3,
    .service-chip span,
    .services-grid-premium > * h3,
    .services-grid-premium > * span,
    .services-grid > * h3,
    .services-grid > * span {
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .artisans-grid,
    .product-grid {
        grid-template-columns: 1fr !important;
    }

    .nav-links {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    [dir="rtl"] .nav-links {
        right: -100vw !important;
    }

    .premium-auth-card,
    .auth-card {
        padding: 24px 12px !important;
    }

    .footer-logo-official > span,
    .logo,
    .auth-logo {
        font-size: 20px !important;
    }
}
@media (max-width: 480px) {
    .artisan-card-premium {
        min-height: 0 !important;
        padding: 0 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .artisan-card-premium > div:first-child {
        height: 118px !important;
        min-height: 118px !important;
    }

    .artisan-card-premium > div:last-child {
        padding: 16px 12px 14px !important;
        margin-top: -34px !important;
    }

    .artisan-card-premium img {
        width: 68px !important;
        height: 68px !important;
        border-radius: 18px !important;
        border-width: 4px !important;
        margin-bottom: 8px !important;
    }

    .artisan-card-premium h4 {
        font-size: 17px !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
    }

    .artisan-card-premium h4 + div {
        font-size: 12px !important;
        margin-bottom: 9px !important;
    }

    .artisan-card-premium [style*="justify-content: center"][style*="color: #FFB800"] {
        gap: 3px !important;
        margin-bottom: 12px !important;
    }

    .artisan-card-premium [data-lucide="star"] {
        width: 14px !important;
        height: 14px !important;
    }

    .artisan-card-premium button {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        gap: 6px !important;
    }
}
@media (max-width: 480px) {
    .testimonial-card {
        min-height: 0 !important;
        padding: 18px 14px !important;
        border-radius: 18px !important;
        text-align: right !important;
    }

    .testimonial-card > div:first-child {
        margin-bottom: 8px !important;
    }

    .testimonial-card [data-lucide="quote"] {
        width: 26px !important;
        height: 26px !important;
    }

    .testimonial-card p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 16px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .testimonial-card > div:last-child {
        gap: 10px !important;
        align-items: center !important;
    }

    .testimonial-card img {
        width: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        flex: 0 0 46px !important;
    }

    .testimonial-card h5 {
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin: 0 0 4px !important;
    }

    .testimonial-card [data-lucide="star"] {
        width: 12px !important;
        height: 12px !important;
    }
}
/* Compact professional mobile drawer */
@media (max-width: 1024px) {
    .nav-links {
        width: min(86vw, 330px) !important;
        max-width: 330px !important;
        height: 100dvh !important;
        padding: 0 14px 18px !important;
        gap: 10px !important;
        background: linear-gradient(180deg, #05070A 0%, #08111F 100%) !important;
        border-inline-start: 1px solid rgba(255, 255, 255, 0.07) !important;
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35) !important;
        justify-content: flex-start !important;
    }

    [dir="rtl"] .nav-links {
        right: min(-86vw, -330px) !important;
    }

    [dir="rtl"] .nav-links.active {
        right: 0 !important;
    }

    .mobile-nav-header {
        width: calc(100% + 28px) !important;
        margin: 0 -14px 10px !important;
        padding: 14px 16px !important;
        min-height: 66px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(5, 7, 10, 0.92) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }

    .mobile-nav-header .logo {
        font-size: 18px !important;
        padding: 8px 10px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
    }

    .mobile-nav-header .logo img {
        height: 28px !important;
    }

    .btn-close-menu {
        width: 40px !important;
        height: 40px !important;
        border-radius: 13px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        flex: 0 0 40px !important;
    }

    .nav-links > .nav-link {
        width: 100% !important;
        min-height: 52px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        background: rgba(255, 255, 255, 0.045) !important;
        color: rgba(255, 255, 255, 0.92) !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-decoration: none !important;
    }

    [dir="rtl"] .nav-links > .nav-link {
        justify-content: flex-start !important;
        flex-direction: row-reverse !important;
    }

    .nav-links > .nav-link i {
        width: 20px !important;
        height: 20px !important;
        color: var(--primary-orange) !important;
        flex: 0 0 20px !important;
    }

    .nav-auth-btns {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 8px 0 0 !important;
        margin: 0 !important;
    }

    .nav-auth-btns a,
    .nav-auth-btns .btn,
    .nav-auth-btns .btn-elite-secondary,
    .nav-auth-btns .btn-elite-primary {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        text-decoration: none !important;
    }

    .nav-auth-btns .btn-elite-secondary {
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }

    .nav-auth-btns .btn-elite-primary {
        background: linear-gradient(135deg, #FF3F00, #E53600) !important;
        color: white !important;
        box-shadow: 0 14px 30px rgba(255, 63, 0, 0.24) !important;
    }

    .lang-switcher {
        width: 100% !important;
        margin-top: auto !important;
        padding-top: 12px !important;
        position: relative !important;
    }

    .lang-btn {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        border-radius: 16px !important;
        background: rgba(255, 63, 0, 0.12) !important;
        border: 1px solid rgba(255, 63, 0, 0.18) !important;
        color: #FF6A33 !important;
    }

    .lang-dropdown {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        width: 100% !important;
        min-width: 100% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .user-profile-nav {
        width: 100% !important;
        padding: 10px 0 0 !important;
        margin: 0 !important;
        border: 0 !important;
        gap: 10px !important;
    }

    .user-info,
    .nav-logout-btn {
        width: 100% !important;
        border-radius: 16px !important;
    }
}

@media (max-width: 480px) {
    .nav-links {
        width: 82vw !important;
        max-width: 315px !important;
    }

    [dir="rtl"] .nav-links {
        right: -82vw !important;
    }

    .nav-links > .nav-link {
        min-height: 50px !important;
        font-size: 14px !important;
    }
}
/* Mobile drawer language button fix */
@media (max-width: 1024px) {
    .mobile-nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
    }

    .mobile-lang-switcher {
        display: flex !important;
        align-items: center !important;
    }

    .mobile-lang-btn {
        height: 40px !important;
        min-width: 62px !important;
        padding: 0 10px !important;
        border-radius: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: rgba(255, 63, 0, 0.12) !important;
        color: #FF6A33 !important;
        border: 1px solid rgba(255, 63, 0, 0.2) !important;
        font-weight: 950 !important;
        font-size: 12px !important;
        cursor: pointer !important;
    }

    .mobile-lang-btn i {
        width: 16px !important;
        height: 16px !important;
    }

    .nav-links > .lang-switcher {
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .nav-links > .lang-switcher > .lang-btn {
        display: none !important;
    }

    .nav-links > .lang-switcher #langDropdown {
        position: fixed !important;
        top: 74px !important;
        right: auto !important;
        left: auto !important;
        width: min(70vw, 230px) !important;
        min-width: 0 !important;
        background: #FFFFFF !important;
        border-radius: 16px !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
        z-index: 50000 !important;
    }

    [dir="rtl"] .nav-links > .lang-switcher #langDropdown {
        right: 78px !important;
    }

    .nav-links > .lang-switcher #langDropdown a {
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    [dir="rtl"] .nav-links > .lang-switcher #langDropdown {
        right: 66px !important;
    }

    .mobile-lang-btn {
        min-width: 56px !important;
        padding: 0 8px !important;
    }
}
/* Final visible language switcher in mobile drawer */
@media (max-width: 1024px) {
    .nav-links > .lang-switcher {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }

    .nav-links > .lang-switcher > .lang-btn {
        display: flex !important;
        width: 100% !important;
        min-height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 16px !important;
        background: rgba(255, 63, 0, 0.12) !important;
        border: 1px solid rgba(255, 63, 0, 0.22) !important;
        color: #FF6A33 !important;
        font-size: 13px !important;
        font-weight: 950 !important;
    }

    .nav-links > .lang-switcher > .lang-btn i {
        width: 17px !important;
        height: 17px !important;
    }

    .nav-links > .lang-switcher #langDropdown {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        z-index: 50000 !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
    }

    [dir="rtl"] .nav-links > .lang-switcher #langDropdown {
        right: 0 !important;
        left: 0 !important;
    }

    .nav-links > .lang-switcher #langDropdown a {
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
    }
}

/* Compact How It Works mobile section */
@media (max-width: 768px) {
    .how-it-works-section {
        padding: 42px 0 28px !important;
        background: #FFFFFF !important;
    }

    .how-it-works-section .container {
        padding-inline: 14px !important;
    }

    .how-it-works-section .section-header-premium {
        margin-bottom: 18px !important;
    }

    .how-it-works-section .section-tag-premium {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        font-size: 10px !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 8px !important;
    }

    .how-it-works-section .section-tag-premium::before,
    .how-it-works-section .section-tag-premium::after {
        content: "";
        width: 18px;
        height: 2px;
        border-radius: 99px;
        background: var(--primary-orange);
    }

    .how-it-works-section h2 {
        max-width: 330px !important;
        margin: 8px auto 0 !important;
        font-size: 24px !important;
        line-height: 1.28 !important;
        letter-spacing: 0 !important;
    }

    .how-it-works-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding-bottom: 4px !important;
    }

    .how-step-card {
        display: grid !important;
        grid-template-columns: 54px 1fr !important;
        grid-template-areas:
            "icon title"
            "icon text" !important;
        column-gap: 14px !important;
        align-items: center !important;
        min-height: 116px !important;
        padding: 18px 16px !important;
        border-radius: 22px !important;
        text-align: start !important;
        border: 1px solid rgba(15, 23, 42, 0.06) !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055) !important;
        background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%) !important;
        transform: none !important;
    }

    .how-step-icon {
        grid-area: icon !important;
        width: 54px !important;
        height: 54px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        font-size: 22px !important;
        background: rgba(255, 63, 0, 0.11) !important;
    }

    .how-step-icon svg,
    .how-step-icon i {
        width: 22px !important;
        height: 22px !important;
    }

    .how-step-card h3 {
        grid-area: title !important;
        margin: 0 0 5px !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
        color: #05070A !important;
    }

    .how-step-card p {
        grid-area: text !important;
        margin: 0 !important;
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
        color: #7890AC !important;
    }
}

@media (max-width: 420px) {
    .how-it-works-section h2 {
        font-size: 22px !important;
    }

    .how-step-card {
        min-height: 108px !important;
        padding: 16px 14px !important;
    }
}