/* =========================================================
   Mobile-only overrides for Home + Registration pages.
   All rules are scoped inside mobile media queries so the
   desktop / tablet design is unaffected.
   ========================================================= */

/* ---------- Tablet & below (≤991.98px) ---------- */
@media (max-width: 991.98px) {

    /* Prevent any horizontal scroll on mobile devices */
    html, body { overflow-x: hidden; }

    /* Home: slider text scales down */
    .main-slider .slider-text h1 { font-size: 32px; line-height: 1.2; }
    .main-slider .slider-text h3 { font-size: 20px; line-height: 1.3; }
    .main-slider .slider-text p  { font-size: 15px; line-height: 1.5; }

    /* Build with Confidence */
    .build-confidence-section .confidence-title    { font-size: 48px; }
    .build-confidence-section .confidence-subtitle { font-size: 22px; }
    .build-confidence-section .decorative-shapes img { max-width: 120px; height: auto; }

    /* Features showcase: 2 columns on tablet */
    .features-showcase-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }

    /* Footer columns stack a bit tighter */
    .figma-footer .footer-row,
    .figma-footer .row { gap: 24px; }

    /* Registration container */
    .registration-hero-section { padding: 40px 16px; }
    .registration-container    { padding: 28px 22px; margin: 24px 0; max-width: 100%; }
}

/* ---------- Phones (≤767.98px) ---------- */
@media (max-width: 767.98px) {

    /* ===== HOME ===== */

    /* Main slider */
    .main-slider .slide-block img { min-height: 360px; object-fit: cover; }
    .main-slider .slider-text { padding: 0 14px; }
    .main-slider .slider-text h1 { font-size: 26px; margin-bottom: 8px; }
    .main-slider .slider-text h3 { font-size: 17px; margin-bottom: 10px; }
    .main-slider .slider-text p  { font-size: 14px; margin-bottom: 14px; }
    .main-slider .slider-text hr { margin: 10px 0; }
    .main-slider .btn-learn {
        display: inline-block;
        min-height: 44px;
        padding: 12px 22px;
        font-size: 14px;
    }

    /* Build with Confidence */
    .build-confidence-section { padding: 50px 16px; }
    .build-confidence-section .confidence-content { text-align: center; }
    .build-confidence-section .confidence-title    { font-size: 38px; line-height: 1; }
    .build-confidence-section .confidence-subtitle { font-size: 18px; }
    .build-confidence-section .orange-icon svg { width: 56px; height: auto; }
    .build-confidence-section .decorative-shapes,
    .build-confidence-section .left-shapes,
    .build-confidence-section .right-shapes { display: none; }

    /* Features showcase: reinforce centering */
    .features-showcase-section { padding: 40px 16px; }
    .features-showcase-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
        padding: 0;
        justify-items: center;
    }
    .feature-showcase-item {
        padding: 18px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .feature-showcase-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 12px;
    }
    .feature-showcase-icon img,
    .feature-showcase-icon svg { width: 56px; height: 56px; margin: 0 auto; display: block; }
    .feature-showcase-content {
        width: 100%;
        text-align: center;
        align-items: center;
    }
    .feature-showcase-title {
        font-size: 16px;
        text-align: center;
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    .feature-showcase-description {
        font-size: 14px;
        text-align: center;
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    /* Build with Confidence: also center the section heading underline */
    .build-confidence-section h1,
    .build-confidence-section h2,
    .build-confidence-section h3 { text-align: center; }

    /* Materials & services / cards sections */
    .materials-services-section,
    .procure-material-hero-section,
    .procure-materials-cards-section,
    .rent-machine-cards-section,
    .equipment-rental-hero-section,
    .rent-machine-banner { padding-left: 14px; padding-right: 14px; }
    .procure-materials-cards-section .swiper,
    .rent-machine-cards-section .swiper { padding-bottom: 30px; }

    /* How it works */
    .how-it-works-section { padding: 40px 16px; }
    .how-it-works-section .steps,
    .how-it-works-section .how-it-works-grid { grid-template-columns: 1fr !important; gap: 18px; }

    /* Signup section */
    .signup-section { padding: 40px 16px; }
    .signup-section .form-row,
    .signup-section .row { flex-direction: column; gap: 12px; }
    .signup-section .form-control,
    .signup-section input,
    .signup-section select,
    .signup-section button,
    .signup-section .btn { width: 100%; min-height: 44px; }

    /* Partners & Members: bigger logos on mobile */
    .partners-section { padding: 40px 16px; text-align: center; }
    .partners-section .partners-group,
    .partners-section .member-group { width: 100%; }

    /* Section title centered */
    .partners-section .section-title,
    .partners-section h2,
    .partners-section h3 {
        text-align: center !important;
        font-size: 28px !important;
        margin: 16px auto 18px !important;
    }
    .partners-section .section-header {
        justify-content: center !important;
        text-align: center;
    }
    .partners-section .orange-bar { display: none !important; }
    .partners-section .logo-marquee-wrapper,
    .partners-section .single-logo-wrapper {
        padding-left: 0 !important;
    }

    /* Bigger logos in the marquee */
    .partners-section .logo-marquee-content { gap: 36px !important; }
    .partners-section .logo-item,
    .partners-section .partner-item,
    .partners-section .member-item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 110px;
        padding: 10px 16px;
    }
    .partners-section .partner-item img {
        max-height: 100px !important;
        max-width: 260px !important;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    .partners-section .member-item img {
        max-height: 90px !important;
        max-width: 200px !important;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    /* Single-logo (non-marquee) case */
    .partners-section .single-logo-wrapper .partner-item img {
        max-height: 110px !important;
        max-width: 280px !important;
    }
    .partners-section .single-logo-wrapper .member-item img {
        max-height: 100px !important;
        max-width: 220px !important;
    }

    /* How It Works: redesign as compact card grid for mobile */
    .how-it-works-section {
        overflow: hidden;
        min-height: auto !important;
        padding: 40px 16px !important;
        display: block !important;
    }
    .how-it-works-container { padding: 0 !important; }
    .how-it-works-title { padding: 0 16px; text-align: center; margin-bottom: 28px !important; }
    .how-it-works-section .how-it-works-subtitle {
        font-size: 24px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        letter-spacing: 1px !important;
        margin-bottom: 2px !important;
    }
    .how-it-works-section .how-it-works-main-title {
        font-size: 40px !important;
        line-height: 1.05 !important;
        text-align: center !important;
        letter-spacing: 1px !important;
        word-break: normal;
        white-space: nowrap;
    }

    /* Steps grid — 2 columns, last item full width */
    .how-it-works-section .how-it-works-steps {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        align-items: stretch;
        justify-items: stretch;
        padding: 0;
        max-width: 100%;
        margin: 0 auto;
    }
    .how-it-works-section .how-it-works-steps::before,
    .how-it-works-section .how-it-works-steps::after { display: none !important; }

    /* Each step becomes a soft card */
    .how-it-works-section .step-item {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding: 18px 10px 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        flex: initial;
    }
    .how-it-works-section .step-item:nth-child(5):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: calc(50% - 7px);
    }

    /* Number circle: smaller orange badge */
    .how-it-works-section .step-number {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
        margin: 0 auto 10px !important;
        background-color: #DE5700 !important;
        color: #fff !important;
        border: none !important;
        font-weight: 700 !important;
    }

    /* Icon: larger and centered */
    .how-it-works-section .step-icon {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px !important;
    }
    .how-it-works-section .step-icon img,
    .how-it-works-section .step-icon svg {
        max-height: 44px;
        max-width: 50px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    /* Label */
    .how-it-works-section .step-label {
        white-space: normal !important;
        text-align: center !important;
        width: 100%;
        font-size: 12px !important;
        line-height: 1.3 !important;
        color: #DAD3C7 !important;
        margin: 0 !important;
        letter-spacing: 0.3px;
        position: static !important;
        transform: none !important;
    }

    /* Signup cards: equal heights & uniform image cropping */
    .signup-section .signup-row { gap: 16px; }
    .signup-section .signup-col { width: 100%; flex: 0 0 100%; max-width: 100%; }
    .signup-section .signup-card {
        height: 200px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }
    .signup-section .signup-bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Build with Confidence: ensure perfect centering */
    .build-confidence-section .confidence-content,
    .build-confidence-section .confidence-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .build-confidence-section .orange-icon { margin: 0 auto 12px; }

    /* Figma nav: ensure drawer items are touchable */
    .figma-nav .nav-link,
    .figma-nav .menu-item,
    .figma-nav a { min-height: 44px; display: flex; align-items: center; }
    .figma-nav .navbar-collapse { padding: 12px 0; }

    /* Figma footer: stack, center everything, equalize spacing */
    footer.figma-footer { padding: 32px 16px !important; text-align: center; }
    footer.figma-footer .footer-background { padding: 0; }
    footer.figma-footer .row { justify-content: center; }
    footer.figma-footer .col,
    footer.figma-footer [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        text-align: center;
    }
    footer.figma-footer .footer-links-section,
    footer.figma-footer .footer-help-section,
    footer.figma-footer .footer-social-section {
        text-align: center;
    }
    footer.figma-footer .footer-nav-links {
        padding: 0;
        list-style: none;
        margin: 0;
    }
    footer.figma-footer .footer-nav-links li {
        display: block;
        margin: 8px 0;
        text-align: center;
    }
    footer.figma-footer .footer-section-title {
        text-align: center;
        margin: 18px 0 10px !important;
    }
    footer.figma-footer .footer-contact-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 6px auto;
        max-width: 320px;
        text-align: center;
    }
    footer.figma-footer .footer-icon { margin: 0; flex-shrink: 0; }
    footer.figma-footer .footer-contact-text,
    footer.figma-footer .footer-contact-link {
        text-align: center;
        word-break: break-word;
    }
    footer.figma-footer .footer-social-icons {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 8px;
    }
    footer.figma-footer .footer-copyright-section {
        text-align: center;
    }
    footer.figma-footer .footer-rights-text { text-align: center; margin: 0; }

    /* Generic container padding */
    .container { padding-left: 14px; padding-right: 14px; }


    /* ===== REGISTRATION ===== */

    /* Push card below the absolute nav/logo */
    .registration-hero-section {
        padding-top: 80px !important;
        padding-right: 12px;
        padding-bottom: 40px;
        padding-left: 12px;
    }
    .registration-container {
        padding: 22px 16px;
        margin: 0 0 24px;
        border-radius: 8px;
    }
    .registration-container h1 { font-size: 24px; margin-bottom: 22px; }

    /* Progress bar: override the inline 82px margin-bottom */
    .progress-bar-supplier { margin-bottom: 56px !important; }
    .progress-step { width: 34px; height: 34px; font-size: 0.85rem; }
    .progress-label {
        top: 42px;
        width: 76px;
        font-size: 0.7rem;
        line-height: 1.2;
    }

    /* Form spacing */
    .form-group { margin-bottom: 16px; }
    .form-group label { font-size: 0.9rem; }
    .form-control { padding: 10px 12px; font-size: 14px; }

    /* File inputs: keep the choose-file button inside */
    .form-control[type="file"],
    input[type="file"].form-control {
        padding: 8px;
        font-size: 0.85rem;
    }

    /* Account type cards: stack full width */
    .account-type-wrapper { padding: 14px; }
    .account-type-options { flex-direction: column; gap: 10px; }
    .account-type-options.single { max-width: 100%; }
    .account-type-option { max-width: 100%; width: 100%; }
    .account-type-label { padding: 12px 16px; }

    /* Bank account block */
    .bank-acc-bx { padding: 12px; }
    .bank-acc-bx .btn-remove {
        width: 100%;
        margin-top: 8px;
        padding: 10px;
    }

    /* Add Account link as a full-width pill */
    .btn-add-account {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 14px;
        border: 1px dashed #DE5701;
        border-radius: 6px;
        margin-top: 12px;
    }

    /* Custom radio list (Material/Equipment/Both) */
    .custom-gender ul {
        flex-direction: column;
        gap: 8px;
    }
    .custom-gender ul li {
        display: flex;
        align-items: center;
    }

    /* Shareholders file rows */
    .shareholders-file-item {
        flex-wrap: wrap;
        gap: 8px;
    }
    .shareholders-file-item .form-control { flex: 1 1 100%; }
    .remove-shareholders-file { width: 100%; }

    /* Buttons: stack and full width (already partly handled by existing CSS) */
    .btn-group {
        flex-direction: column;
        gap: 10px;
    }
    .btn-main, .btn-prev {
        width: 100%;
        min-height: 44px;
        padding: 12px 18px;
        text-align: center;
    }

    /* Terms checkbox row */
    input[type="checkbox"] + label {
        display: inline;
        font-size: 0.9rem;
    }

    /* Select2 multi-select sizing */
    .select2-container .select2-selection--multiple,
    .select2-container .select2-selection--single {
        min-height: 44px;
    }
    .select2-container { width: 100% !important; }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {

    /* Home tightening */
    .main-slider .slider-text h1 { font-size: 22px; }
    .main-slider .slider-text h3 { font-size: 15px; }
    .main-slider .slider-text p  { font-size: 13px; }

    .build-confidence-section .confidence-title    { font-size: 32px; }
    .build-confidence-section .confidence-subtitle { font-size: 16px; }

    .feature-showcase-title { font-size: 15px; }

    .container { padding-left: 12px; padding-right: 12px; }

    /* Registration tightening */
    .registration-hero-section { padding: 20px 10px; }
    .registration-container {
        padding: 18px 12px;
        margin: 8px 0;
    }
    .registration-container h1 { font-size: 22px; }

    .progress-bar-supplier { margin-bottom: 48px !important; }
    .progress-step { width: 30px; height: 30px; font-size: 0.75rem; }
    .progress-label { font-size: 0.65rem; top: 36px; width: 64px; }

    .account-type-label { padding: 10px 14px; font-size: 0.9rem; }

    .form-control { font-size: 13px; }
    .form-group label { font-size: 0.85rem; }

    /* How It Works at very small width */
    .how-it-works-section { padding: 32px 12px !important; }
    .how-it-works-title { margin-bottom: 22px !important; }
    .how-it-works-section .how-it-works-subtitle { font-size: 20px !important; letter-spacing: 0.5px !important; }
    .how-it-works-section .how-it-works-main-title { font-size: 32px !important; letter-spacing: 0.5px !important; }
    .how-it-works-section .how-it-works-steps { gap: 10px; }
    .how-it-works-section .step-item { padding: 14px 8px 12px; }
    .how-it-works-section .step-number { width: 32px !important; height: 32px !important; font-size: 14px !important; }
    .how-it-works-section .step-icon { height: 42px; margin-bottom: 8px !important; }
    .how-it-works-section .step-icon img,
    .how-it-works-section .step-icon svg { max-height: 38px; max-width: 42px; }
    .how-it-works-section .step-label { font-size: 11px !important; }

    /* Partners/Members logos: still generous on small phones */
    .partners-section .section-title,
    .partners-section h2,
    .partners-section h3 { font-size: 22px !important; }
    .partners-section .logo-item,
    .partners-section .partner-item,
    .partners-section .member-item { min-height: 90px; padding: 8px 12px; }
    .partners-section .partner-item img { max-height: 80px !important; max-width: 220px !important; }
    .partners-section .member-item img { max-height: 70px !important; max-width: 170px !important; }

    /* Signup card smaller height on tiny phones */
    .signup-section .signup-card { height: 170px; }
}