/* ============================================================
   DIVA DUBAI — Responsive Overrides
   ============================================================
   This file contains ONLY @media queries.
   It does NOT modify any desktop styles.
   Loaded AFTER style.min.css via AppAsset.
   ============================================================ */

/* ── VIEWPORT META (ensure proper scaling) ── */

/* ══════════════════════════════════════════════
   MOBILE — max-width: 767px
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Global: prevent horizontal scroll ── */
    html, body {
        overflow-x: hidden !important;
    }

    .wrapper,
    .wrapper_content,
    .middle {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* ── Images: never overflow container ── */
    img {
        max-width: 100%;
        height: auto;
    }

    /* ── Header ── */
    .header .header_content {
        padding: 0 10px;
    }

    .header .header_content .logo {
        max-width: 120px;
    }

    .header .menu {
        display: none;
    }

    /* ── Main Slider ── */
    .main_slider {
        width: 100% !important;
    }

    .main_slider .slide {
        width: 100% !important;
    }

    .main_slider .slider_text {
        padding: 20px 15px !important;
    }

    .main_slider .slider_text .title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .main_slider .slider_text .description {
        font-size: 14px !important;
        max-width: 100% !important;
    }

    /* ── Services Block (Model Management, Print & Film, etc.) ── */
    .services_block {
        width: 100% !important;
        padding: 20px 10px !important;
    }

    .services_block .block_wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .services_block .col {
        width: 48% !important;
        margin: 1% !important;
        float: left !important;
    }

    .services_block .image {
        width: 100% !important;
        height: auto !important;
    }

    .services_block .image img {
        width: 100% !important;
        height: auto !important;
    }

    .services_block .title {
        font-size: 12px !important;
        padding: 5px !important;
    }

    .services_block .title_wrapper {
        width: 100% !important;
    }

    .services_block .title_wrapper .block_title {
        font-size: 18px !important;
    }

    /* ── Register Block (Become part of Divas Team / International Model Form) ── */
    .registrer_block {
        width: 100% !important;
    }

    .registrer_block .block_content {
        width: 100% !important;
        padding: 20px 15px !important;
    }

    .registrer_block .col {
        width: 100% !important;
        float: none !important;
        text-align: center;
        margin-bottom: 15px;
    }

    .registrer_block .main_title {
        font-size: 20px !important;
    }

    .registrer_block .register_btn,
    .registrer_block .btn-custom {
        display: inline-block;
        margin: 10px auto;
    }

    /* ── Achievements Block (Awards, Our Clients, etc.) ── */
    .achievements_block {
        width: 100% !important;
    }

    .achievements_block .block_content {
        width: 100% !important;
        padding: 15px !important;
    }

    .achievements_block .col {
        width: 48% !important;
        margin: 1% !important;
        float: left !important;
    }

    .achievements_block .image {
        width: 100% !important;
        height: auto !important;
    }

    .achievements_block .image img {
        width: 100% !important;
        height: auto !important;
    }

    .achievements_block .title {
        font-size: 12px !important;
    }

    .achievements_block .description {
        font-size: 12px !important;
        max-width: 100% !important;
    }

    /* ── Casting Section ── */
    #casting-section {
        width: 100% !important;
        overflow-x: hidden;
    }

    .castings_block {
        width: 100% !important;
    }

    .castings_block .block_wrapper {
        width: 100% !important;
    }

    .castings_block .casting_item,
    .casting_item {
        width: 48% !important;
        margin: 1% !important;
        float: left !important;
    }

    .casting_item .image,
    .casting_item img {
        width: 100% !important;
        height: auto !important;
    }

    /* ── Socials Block ── */
    .socials_block {
        width: 100% !important;
    }

    .socials_block .block_content {
        width: 100% !important;
        padding: 15px !important;
    }

    /* ── Company Block (About section with logo + text) ── */
    .company_block {
        width: 100% !important;
    }

    .company_block .block_content {
        width: 100% !important;
    }

    .company_block .col_logo,
    .company_block .col_text {
        width: 100% !important;
        float: none !important;
    }

    /* ── Footer ── */
    .footer {
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
    }

    .footer .footer_content {
        padding: 20px 15px !important;
    }

    .footer .footer_content .row > div {
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px;
    }

    .footer .menu_wrapper {
        margin-left: 0 !important;
    }

    .footer .menu_wrapper .menu {
        width: 100% !important;
        float: none !important;
        padding-left: 15px !important;
    }

    /* ── Category / Talent List Pages ── */
    .category_page .block_wrapper,
    .search_page .block_wrapper {
        width: 100% !important;
    }

    .category_page .user_item,
    .search_page .user_item {
        width: 48% !important;
        margin: 1% !important;
    }

    .category_page .user_item img,
    .search_page .user_item img {
        width: 100% !important;
        height: auto !important;
    }

    /* ── Profile Page ── */
    .profile_page .profile_content {
        width: 100% !important;
    }

    .profile_page .profile_sidebar,
    .profile_page .profile_main {
        width: 100% !important;
        float: none !important;
    }

    /* ── Inner Pages (Contact, Services, etc.) ── */
    .not_front .middle {
        padding: 0 10px !important;
    }

    .not_front .middle .container {
        width: 100% !important;
        padding: 0 10px !important;
    }

    /* ── Contact Page ── */
    .contact_page .block_content {
        width: 100% !important;
    }

    /* ── Tables (if any) ── */
    table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }

    /* ── Bootstrap Container override ── */
    .container {
        width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* ══════════════════════════════════════════════
   SMALL MOBILE — max-width: 480px
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Services: single column on very small phones */
    .services_block .col {
        width: 100% !important;
        margin: 5px 0 !important;
        float: none !important;
    }

    /* Achievements: single column */
    .achievements_block .col {
        width: 100% !important;
        margin: 5px 0 !important;
        float: none !important;
    }

    /* Castings: single column */
    .castings_block .casting_item,
    .casting_item {
        width: 100% !important;
        margin: 5px 0 !important;
        float: none !important;
    }

    /* Category users: single column */
    .category_page .user_item,
    .search_page .user_item {
        width: 100% !important;
        margin: 5px 0 !important;
    }

    /* Slider text even smaller */
    .main_slider .slider_text .title {
        font-size: 18px !important;
    }

    .main_slider .slider_text .description {
        font-size: 12px !important;
    }
}


/* ══════════════════════════════════════════════
   TABLET — 768px to 991px
   ══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) {

    .services_block .col {
        width: 30% !important;
        margin: 1.5% !important;
    }

    .achievements_block .col {
        width: 30% !important;
        margin: 1.5% !important;
    }

    .registrer_block .col {
        width: 48% !important;
    }

    .category_page .user_item,
    .search_page .user_item {
        width: 31% !important;
        margin: 1% !important;
    }
}


/* ══════════════════════════════════════════════
   REGISTRATION FORM — Mobile Responsive
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Registration wrapper */
    .register_wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box;
    }

    /* Form sections */
    .form_wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    .form_content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 0 !important;
    }

    .form_title {
        font-size: 16px !important;
        padding: 10px !important;
    }

    /* Labels: stack above fields */
    .page_register .main_label,
    .register_wrap .main_label {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
        padding: 5px 15px !important;
        margin-bottom: 5px;
    }

    /* Fields: full width */
    .page_register .form-group .field,
    .register_wrap .form-group .field,
    .register_wrap .form-group [class*= col-sm-],
    .register_wrap .form-group [class*=col-md-] {
        width: 100% !important;
        float: none !important;
        padding: 0 15px !important;
    }

    /* Form controls */
    .register_wrap .form_text,
    .register_wrap .form-control,
    .register_wrap select.form-control,
    .register_wrap input.form-control,
    .register_wrap textarea.form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hint text */
    .register_wrap .hint {
        width: 100% !important;
        float: none !important;
        padding: 5px 15px !important;
        font-size: 12px;
    }

    /* Help block */
    .register_wrap .help-block {
        width: 100% !important;
        float: none !important;
    }

    /* Country/Region/Continent: stack */
    .register_wrap .field_select.field_name .form-control {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 8px;
    }

    /* Radio/checkboxes: wrap */
    .register_wrap .form_checkboxes {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px;
    }

    .register_wrap .form_checkboxes .form_checkbox {
        flex: 0 0 48%;
        min-width: 120px;
    }

    /* Photo upload */
    .register_wrap .photo_upload,
    .register_wrap .polaroid_upload {
        width: 100% !important;
        padding: 5px !important;
    }

    .register_wrap .fl_upld {
        width: 100% !important;
        float: none !important;
    }

    /* Crop popup: fullscreen on mobile */
    .crop_popup {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999;
        overflow: auto;
    }

    .crop_content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    /* Signature pad */
    canvas#signature-pad {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
    }

    /* Submit buttons */
    .register_wrap .form_actions,
    .register_wrap .form_actions-responsive {
        width: 100% !important;
        padding: 10px 15px !important;
        text-align: center;
    }

    .register_wrap .form_actions .btn,
    .register_wrap .form_actions-responsive .btn {
        width: 100% !important;
        max-width: 300px;
        margin: 5px auto !important;
        display: block;
    }

    /* Measurement selects */
    .register_wrap .select-measurments-custom {
        width: auto !important;
        display: inline-block !important;
        margin-top: 5px;
    }

    /* Middle container for register page */
    .wrapper_content.page_register .middle {
        padding: 0 5px !important;
    }

    /* Video upload */
    .register_wrap .video_upload {
        width: 100% !important;
    }

    .register_wrap .video_upload .field {
        width: 100% !important;
    }

    .register_wrap .description.col-sm-offset-4 {
        margin-left: 0 !important;
    }

    /* WhatsApp block */
    .register_wrap .whatsapp-block {
        margin: 10px 0 0 0 !important;
        width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .register_wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .form_wrap {
        width: 100% !important;
    }

    .page_register .main_label,
    .register_wrap .main_label {
        width: 100% !important;
        float: none !important;
        text-align: left !important;
        margin-bottom: 5px;
    }

    .register_wrap .form-group .field {
        width: 100% !important;
        float: none !important;
    }

    .register_wrap .form_checkboxes .form_checkbox {
        flex: 0 0 30%;
    }
}