/* ==========================================================================
   بترو غاز إنرجي (Petro Gas Energy) - ملف التجاوبية (Responsive Styles)
   ========================================================================== */

/* شاشات الحواسيب المحمولة والشاشات المتوسطة (992px إلى 1220px) */
@media (min-width: 992px) and (max-width: 1220px) {
  .main_navbar .container {
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }
  .navbar-expand-lg .navbar-collapse {
    margin-right: 15px;
  }
  .brand_logo_img {
    width: 38px;
    height: 38px;
  }
  .brand_title {
    font-size: 1.10rem;
  }
  .brand_subtitle {
    font-size: 0.62rem;
  }
  .navbar-expand-lg .navbar-nav {
    gap: 2px;
  }
  .navbar-expand-lg .nav-link {
    padding: 6px 9px !important;
    font-size: 0.86rem;
  }
  .nav_action_btn {
    padding: 7px 14px;
    font-size: 0.80rem;
    gap: 5px;
  }
}

/* شاشات الحواسيب المحمولة والأجهزة اللوحية الكبيرة (Max 1200px) */
@media (max-width: 1200px) {
  .hero_title {
    font-size: 1.75rem;
  }
}

/* شاشات الأجهزة اللوحية والمحمولة (أقل من 992px) */
@media (max-width: 991.98px) {
  .topbar_right {
    display: none !important;
  }
  .topbar_wrapper {
    justify-content: center;
  }
  .topbar_contact {
    justify-content: center;
    width: 100%;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
  }
  .hero_area {
    min-height: auto;
    padding: 48px 0;
    text-align: center;
  }
  .hero_title {
    font-size: 1.55rem;
  }
  .hero_desc {
    margin: 0 auto 30px;
  }
  .hero_actions {
    justify-content: center;
  }
  .hero_img_container {
    margin-top: 40px;
  }
  .hero_vessel_img {
    height: auto;
    max-height: 260px;
  }
  .hero_logo_slide_box {
    min-height: auto;
    padding: 20px 15px;
  }
  .hero_logo_slider_img {
    max-height: 145px;
    max-width: 65%;
  }
  .hero_float_badge {
    position: static;
    margin-top: 20px;
    display: inline-flex;
  }
  .main_navbar {
    padding: 10px 0;
  }
  .navbar-collapse {
    background: #ffffff;
    padding: 16px;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(10, 38, 71, 0.12);
    margin-top: 12px;
    border: 1px solid var(--border-color);
    width: 100%;
  }
  .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
    padding: 0;
    width: 100%;
  }
  .navbar-nav .nav-item {
    width: 100%;
  }
  .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 11px 16px !important;
    font-size: 0.96rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    color: var(--text-dark) !important;
    transition: all 0.25s ease;
    text-align: right;
    text-decoration: none;
  }
  .navbar-nav .nav-link::after {
    display: none !important;
  }
  .navbar-nav .nav-link:hover {
    background: rgba(0, 180, 216, 0.08);
    color: var(--secondary-dark) !important;
    padding-right: 20px !important;
  }
  .navbar-nav .nav-item.active .nav-link {
    background: linear-gradient(90deg, rgba(0, 180, 216, 0.14), rgba(0, 180, 216, 0.03));
    color: var(--secondary-dark) !important;
    border-right: 4px solid var(--secondary);
    font-weight: 800;
  }
  .nav_action_wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
  }
  .nav_action_wrapper .lang_switcher_btn {
    width: 100%;
    margin: 0 !important;
    padding: 11px 16px;
    font-size: 0.94rem;
    justify-content: center;
    border-radius: var(--radius-sm);
  }
  .nav_action_btn {
    width: 100%;
    margin: 0 !important;
    padding: 12px 20px;
    font-size: 0.92rem;
    justify-content: center;
    border-radius: var(--radius-sm);
  }
}

/* شاشات الهواتف الكبيرة والمتوسطة (Max 768px) */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.85rem;
  }
  .topbar_contact {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    text-align: center;
  }
  .topbar_contact a {
    font-size: 0.78rem;
  }
  .hero_title {
    font-size: 1.35rem;
  }
  .stat_number {
    font-size: 2.3rem;
  }
  .stat_counter_card {
    margin-bottom: 25px;
  }
  .contact_info_box {
    margin-bottom: 30px;
    padding: 25px;
  }
  .floating_actions_container {
    bottom: 20px;
    left: 20px;
  }
  .floating_btn {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
  .custom_toast_container {
    left: 15px;
    right: 15px;
    top: 20px;
  }
  .custom_toast {
    min-width: auto;
    width: 100%;
  }
}

/* شاشات الهواتف الصغيرة (Max 480px) */
@media (max-width: 480px) {
  .hero_title {
    font-size: 1.20rem;
  }
  .hero_desc {
    font-size: 0.95rem;
  }
  .btn-custom {
    padding: 10px 20px;
    font-size: 0.9rem;
    width: 100%;
  }
  .hero_actions {
    flex-direction: column;
    width: 100%;
  }
  .brand_logo_img {
    width: 35px;
    height: 35px;
  }
  .brand_title {
    font-size: 1.05rem;
  }
  .brand_subtitle {
    font-size: 0.60rem;
  }
  .navbar-toggler {
    padding: 6px 10px;
  }
  .navbar-toggler i {
    font-size: 1.2rem;
  }
}

/* التجاوبية في وضع LTR (Mobile LTR Overrides) */
@media (max-width: 991.98px) {
  body.ltr-mode .navbar-nav .nav-link {
    text-align: left;
    justify-content: flex-start;
  }
  body.ltr-mode .navbar-nav .nav-link:hover {
    padding-right: 16px !important;
    padding-left: 20px !important;
  }
  body.ltr-mode .navbar-nav .nav-item.active .nav-link {
    border-right: none !important;
    border-left: 4px solid var(--secondary) !important;
    background: linear-gradient(270deg, rgba(0, 180, 216, 0.14), rgba(0, 180, 216, 0.03));
  }
}

/* تجاوبية صفحة أسواق الطاقة (Markets Responsive Rules) */
@media (max-width: 991.98px) {
  .chart_symbol_tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }
  .chart_tab_btn {
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 0.82rem;
  }
  .tradingview_widget_container {
    height: 400px;
  }
  .table_controls_wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .category_filter_pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }
  .category_pill {
    white-space: nowrap;
  }
  .table_search_box {
    width: 100%;
    min-width: 100%;
  }
  .calc_breakdown_grid {
    grid-template-columns: 1fr;
  }
  .total_number {
    font-size: 1.7rem;
  }
}

@media (max-width: 576px) {
  .markets_hero_section {
    padding: 40px 0 !important;
  }
  .markets_live_status_pill {
    font-size: 0.8rem;
    padding: 6px 14px;
  }
  .markets_header_btn_group {
    flex-direction: column;
    width: 100%;
  }
  .markets_header_btn_group .btn-custom {
    width: 100%;
  }
  .kpi_price_num {
    font-size: 1.6rem;
  }
  .tradingview_widget_container {
    height: 340px;
  }
  .total_number {
    font-size: 1.4rem;
  }
}