@charset "UTF-8";
/* =====================================================================
   rtl.css — Arabic / RTL overrides for bottles-packaging.com
   Loaded AFTER style.css on every ar_*.asp page only.
   The base layout is float+fixed-width, which does not flip with
   dir="rtl", so every directional rule is mirrored here explicitly.
   ===================================================================== */

html[dir="rtl"] body{
  font-family:"Segoe UI","Tahoma","Noto Naskh Arabic","Arial",sans-serif;
  text-align:right;direction:rtl;
}
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select,html[dir="rtl"] button{
  font-family:"Segoe UI","Tahoma","Noto Naskh Arabic","Arial",sans-serif;
}
html[dir="rtl"] .container{text-align:right}
html[dir="rtl"] .clear{clear:both}

/* ---------- top bar / header ---------- */
html[dir="rtl"] #header .header_bg .l{float:right;margin-right:140px;margin-left:0}
html[dir="rtl"] #header .header_bg .r{float:left}
html[dir="rtl"] #header .header_bg .l em{margin-right:0;margin-left:18px}
html[dir="rtl"] #header .header_img{float:right}
html[dir="rtl"] #header .header_search{float:right;direction:rtl;text-align:right}
html[dir="rtl"] #header .header_search input[type="text"]{text-align:right;direction:rtl}
html[dir="rtl"] #header .header_search input[type="image"]{float:left}
html[dir="rtl"] #header .logo{float:right}
html[dir="rtl"] #menu{float:left}
html[dir="rtl"] #menu ul li{float:right;border-left:0;border-right:1px solid #c8c8c8}
html[dir="rtl"] #menu ul li:first-child{border-right:0}
html[dir="rtl"] #menu ul li a{font-family:"Segoe UI","Tahoma","Noto Naskh Arabic",Arial,sans-serif;padding:0 18px;font-size:15px}
html[dir="rtl"] #menu ul li:last-child a{padding-right:18px;padding-left:0}
html[dir="rtl"] #header .header_bg .r em img,
html[dir="rtl"] #header .header_bg .l em img{margin-right:0;margin-left:6px}

/* ---------- breadcrumb ---------- */
html[dir="rtl"] .location{text-align:right}
html[dir="rtl"] .location img{margin-right:0;margin-left:8px}

/* ---------- page heading strip ---------- */
html[dir="rtl"] #left .left_top{direction:rtl}

/* ---------- home: product grid ---------- */
html[dir="rtl"] #home_pro .home_pro_con ul li{float:right;margin-right:24px;margin-left:0}
html[dir="rtl"] #home_pro .home_pro_con ul li:nth-child(3n+1){margin-right:0;margin-left:0}
html[dir="rtl"] #home_pro .home_pro_con ul li .desc{text-align:right}
html[dir="rtl"] #home_pro .home_pro_con ul li .desc em{margin-right:0;margin-left:auto}

/* ---------- home: about ---------- */
html[dir="rtl"] #home_about .home_about_con{text-align:right}
html[dir="rtl"] #home_about .home_about_con .l{float:right}
html[dir="rtl"] #home_about .home_about_con .r{float:left}
html[dir="rtl"] #home_about .home_about_con .l ul>li{float:right;text-align:right}
html[dir="rtl"] #home_about .home_about_con .l span.left{left:auto;right:-50px}
html[dir="rtl"] #home_about .home_about_con .l span.right{right:auto;left:-40px}
html[dir="rtl"] #home_about .home_about_con .l ul>li>span>img{margin-right:0;margin-left:5px}
html[dir="rtl"] #home_about .home_about_con .l ul>li>p{width:78%}

/* ---------- product card grid (products / search) ---------- */
html[dir="rtl"] ul.list_pro{text-align:right}
html[dir="rtl"] ul.list_pro li{float:right;margin-right:30px;margin-left:0}
html[dir="rtl"] ul.list_pro li:nth-child(3n+1){margin-right:0;margin-left:0}
html[dir="rtl"] ul.list_pro li span{text-align:center}

/* ---------- section headings with accent bar ---------- */
html[dir="rtl"] .right_con h2[style*="border-left"]{
  border-left:0!important;border-right:4px solid #c8102e!important;
  padding-left:0!important;padding-right:12px!important;
}

/* ---------- tables ---------- */
html[dir="rtl"] .right_con table{text-align:right}
html[dir="rtl"] .right_con table th,
html[dir="rtl"] .right_con table td{text-align:right}
html[dir="rtl"] .hw_tbl th,html[dir="rtl"] .hw_tbl td{text-align:right}

/* ---------- lists ---------- */
html[dir="rtl"] .right_con ul{padding-right:22px;padding-left:0}
html[dir="rtl"] .right_con ul.list_pro{padding-right:0}
html[dir="rtl"] .hw_list{padding-right:20px;padding-left:0}
html[dir="rtl"] .hw_list li{text-align:right}

/* ---------- product detail ---------- */
html[dir="rtl"] .dis_big .l{float:right}
html[dir="rtl"] .dis_big .r{float:left;text-align:right}
html[dir="rtl"] .dis_big .r h1{text-align:right}
html[dir="rtl"] .pd_spec ul.rows li{padding-right:8px;padding-left:0}
html[dir="rtl"] .pd_spec ul.rows li:before{right:0;left:auto}
html[dir="rtl"] .pd_spec ul.rows li b{margin-right:0;margin-left:10px}
html[dir="rtl"] .wa_row a{flex-direction:row-reverse}

/* ---------- forms ---------- */
html[dir="rtl"] .form-group{text-align:right}
html[dir="rtl"] .form-group em,
html[dir="rtl"] .form-group label{text-align:right;display:block}
html[dir="rtl"] .form-group input[type="text"],
html[dir="rtl"] .form-group textarea{text-align:right;direction:rtl}
html[dir="rtl"] .form-group input[type="email"],
html[dir="rtl"] .form-group input[type="tel"]{direction:ltr;text-align:left}
html[dir="rtl"] .vc-row{display:flex;gap:10px;align-items:center;flex-direction:row-reverse;justify-content:flex-end}
html[dir="rtl"] .vc-row input{width:110px;flex:0 0 110px}

/* ---------- contact columns ---------- */
html[dir="rtl"] .ct_left{text-align:right}
html[dir="rtl"] .ct_right{text-align:right}
html[dir="rtl"] .ct_quote ul{margin:0 20px 10px 0;padding:0}
html[dir="rtl"] .ct_quote li{text-align:right}

/* ---------- footer ---------- */
html[dir="rtl"] #footer .footer_con .l{float:right;text-align:right}
html[dir="rtl"] #footer .footer_con .r{float:left;text-align:left}
html[dir="rtl"] #footer .footer_con .r>img{margin-right:0;margin-left:5px}
html[dir="rtl"] #footer_nav .footer_nav_con .list{float:right;padding-right:0;padding-left:50px}
html[dir="rtl"] #footer_nav .footer_nav_con .list span,
html[dir="rtl"] #footer_nav .footer_nav_con .list li{text-align:right}

/* ---------- generic: images that were floated right ---------- */
html[dir="rtl"] .right_con img[align="right"]{float:left;margin-right:0;margin-left:16px}

/* ---------- keep code-ish strings LTR ---------- */
html[dir="rtl"] .ltr{direction:ltr;unicode-bidi:embed;display:inline-block}

/* ---------- per-language header geometry (mirrors R19 block) ---------- */
@media screen and (min-width:1201px){
  html[lang="ar"] #header .header_bg > .container,
  html[lang="ar"] #header > .container{
    width:1180px;min-width:0;margin:0 auto;padding-left:0;
  }
  html[lang="ar"] #header .logo{margin-left:0;margin-right:0;padding-right:140px;padding-left:0}
  html[dir="rtl"] #header .header_bg .l{margin-right:140px;margin-left:0}
}

/* ---------- mobile ---------- */
@media screen and (max-width:1200px){
  html[dir="rtl"] #header .header_bg .l{margin-right:0}
  html[dir="rtl"] #header .logo{padding-right:0}
  html[dir="rtl"] ul.list_pro li{margin-right:0}
  html[dir="rtl"] #home_pro .home_pro_con ul li{margin-right:0}
  html[dir="rtl"] ul.list_pro li,
  html[dir="rtl"] #home_pro .home_pro_con ul li{float:none;margin-left:auto;margin-right:auto}
  html[dir="rtl"] #home_about .home_about_con .l,
  html[dir="rtl"] #home_about .home_about_con .r,
  html[dir="rtl"] .dis_big .l,
  html[dir="rtl"] .dis_big .r{float:none;width:100%}
  html[dir="rtl"] #home_about .home_about_con .l span.left,
  html[dir="rtl"] #home_about .home_about_con .l span.right{display:none}
  html[dir="rtl"] .hw_tbl{text-align:right}
}