/* Super Market - Modern & Premium Styles */

.sm_main_wrapper { background: #121212; color: #fff; padding: 15px; border-radius: 12px; width: 100%; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

/* TABS */
.sm_tabs_nav { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; justify-content: center; overflow-x: auto; }
.sm_tab_btn { padding: 5px 6px; cursor: pointer; border-radius: 20px; font-weight: bold; font-size: 13px; color: #888; transition: 0.3s; white-space: nowrap; border: 1px solid transparent; }
.sm_tab_btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sm_tab_btn.active { color: #fff; border-color: #444; background: #222; }

/* COLOR CODING TABS */
.sm_tab_btn[onclick*="vip"].active { border-color: #d4af37; color: #d4af37; background: rgba(212,175,55,0.1); }
.sm_tab_btn[onclick*="gold"].active { border-color: #f1c40f; color: #f1c40f; background: rgba(241,196,15,0.1); }
.sm_tab_btn[onclick*="ruby"].active { border-color: #e74c3c; color: #e74c3c; background: rgba(231,76,60,0.1); }

.sm_tab_content { display: none; animation: smFadeIn 0.3s ease; }
.sm_tab_content.active { display: block; }
@keyframes smFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* CARDS */
.sm_pkg_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sm_card { background: #1a1a1a; border: 1px solid #333; border-radius: 15px; padding: 20px; text-align: center; transition: 0.3s; position: relative; overflow: hidden; }
.sm_card:hover { transform: translateY(-5px); border-color: #444; box-shadow: 0 10px 20px rgba(0,0,0,0.4); }

.sm_card_icon { font-size: 32px; margin-bottom: 10px; display: block; }
.sm_card_title { font-size: 13px; font-weight: bold; color: #aaa; margin-bottom: 5px; min-height: 35px; display: flex; align-items: center; justify-content: center; }
.sm_card_amount { font-size: 24px; font-weight: 900; color: #fff; margin-bottom: 10px; }
.sm_card_price { background: #222; padding: 5px 12px; border-radius: 20px; font-size: 14px; font-weight: bold; color: #fff; display: inline-block; margin-bottom: 15px; }

.sm_buy_btn { width: 100%; border: none; padding: 12px; border-radius: 10px; font-weight: bold; cursor: pointer; transition: 0.3s; font-size: 13px; text-transform: uppercase; }

/* VIP THEME */
#sm_tab_vip .sm_card:hover { border-color: #d4af37; }
#sm_tab_vip .sm_buy_btn { background: linear-gradient(135deg, #d4af37, #b8941f); color: #000; }
#sm_tab_vip .sm_card_price { color: #d4af37; }

/* GOLD THEME */
#sm_tab_gold .sm_card:hover { border-color: #f1c40f; }
#sm_tab_gold .sm_buy_btn { background: linear-gradient(135deg, #f1c40f, #d4ac0d); color: #000; }
#sm_tab_gold .sm_card_price { color: #f1c40f; }

/* RUBY THEME */
#sm_tab_ruby .sm_card:hover { border-color: #e74c3c; }
#sm_tab_ruby .sm_buy_btn { background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; }
#sm_tab_ruby .sm_card_price { color: #e74c3c; }

/* EXCHANGE (MARKET-1 STYLE) */
.sm_exchange_box { background: #1a1a1a; border-radius: 15px; padding: 20px; border: 1px solid #333; }
.sm_ex_balance_card { background: linear-gradient(135deg, #222, #111); border: 1px solid #333; border-radius: 12px; padding: 15px; margin-bottom: 20px; display: flex; justify-content: space-around; text-align: center; }
.sm_ex_bal_item span { display: block; font-size: 11px; color: #888; text-transform: uppercase; }
.sm_ex_bal_item strong { font-size: 18px; color: #fff; }

.sm_ex_type_nav { display: flex; gap: 10px; margin-bottom: 20px; }
.sm_ex_type_btn { flex: 1; background: #222; border: 1px solid #333; padding: 10px; border-radius: 8px; color: #888; cursor: pointer; transition: 0.3s; font-size: 12px; font-weight: bold; }
.sm_ex_type_btn.active { border-color: #d4af37; color: #d4af37; background: rgba(212,175,55,0.05); }

.sm_ex_field_wrap { margin-bottom: 20px; }
.sm_ex_label { font-size: 12px; color: #888; margin-bottom: 8px; display: block; font-weight: bold; }
.sm_ex_input_group { position: relative; }
.sm_ex_input_group i { position: absolute; left: 15px; top: 16px; font-size: 20px; color: #f1c40f; }
.sm_ex_input { width: 100%; background: #000; border: 2px solid #333; padding: 15px 15px 15px 50px; border-radius: 12px; color: #fff; font-size: 22px; font-weight: bold; outline: none; transition: 0.3s; }
.sm_ex_input:focus { border-color: #d4af37; box-shadow: 0 0 15px rgba(212,175,55,0.2); }

.sm_ex_percent_btns { display: flex; gap: 8px; margin-top: 10px; }
.sm_ex_p_btn { flex: 1; background: #222; border: 1px solid #333; padding: 8px; border-radius: 6px; font-size: 11px; color: #888; cursor: pointer; text-align: center; transition: 0.3s; }
.sm_ex_p_btn:hover { border-color: #d4af37; color: #d4af37; }

.sm_ex_info_box { background: #222; border-radius: 10px; padding: 15px; margin-bottom: 20px; }
.sm_ex_row { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: #aaa; }
.sm_ex_row strong { color: #fff; }
.sm_ex_row.total { border-top: 1px solid #333; margin-top: 8px; padding-top: 10px; color: #d4af37; font-size: 16px; }

/* MODALS (VIP GOLD STYLE) */
.sm_modal_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 999999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.sm_modal_overlay.active { display: flex !important; }
.sm_modal_card { background: #1a1a1a; border: 1px solid #d4af37; border-radius: 20px; width: 95%; max-width: 450px; padding: 30px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.8); position: relative; color: #fff; animation: smZoom 0.3s ease; }
@keyframes smZoom { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.sm_modal_icon { font-size: 45px; color: #d4af37; margin-bottom: 15px; }
.sm_modal_info_box { background: #222; border-radius: 12px; padding: 15px; border: 1px solid #333; margin: 15px 0; text-align: left; }
.sm_iban_card { background: #1a1a1a; border: 1px solid #333; border-radius: 10px; padding: 12px; margin-bottom: 10px; transition: 0.3s; }
.sm_iban_bank { font-weight: bold; color: #d4af37; margin-bottom: 5px; }
.sm_iban_copy { background: #121212; padding: 8px 12px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; margin-top: 8px; border: 1px dashed #444; }
.sm_iban_copy code { font-family: monospace; color: #fff; }

/* FORM */
.sm_form_group { text-align: left; margin-bottom: 15px; }
.sm_form_group label { display: block; font-size: 12px; color: #888; margin-bottom: 5px; }
.sm_form_group input, .sm_form_group select, .sm_form_group textarea { width: 100%; background: #121212; border: 1px solid #333; padding: 12px; border-radius: 8px; color: #fff; font-size: 14px; outline: none; transition: 0.3s; }
.sm_form_group input:focus { border-color: #d4af37; }

.sm_file_upload { background: #252525; border: 2px dashed #d4af37; border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; color: #fff; font-size: 14px; position: relative; }
.sm_file_upload input { position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; }

/* --- VIP Gold Parity Styles --- */
.vip_modal_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 999999; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.vip_modal_overlay.active { display: flex !important; }
.vip_modal_card { background: #1a1a1a; border: 1px solid #d4af37; border-radius: 20px; width: 90%; max-width: 450px; padding: 30px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.8); position: relative; color: #fff; }
.vip_modal_icon { font-size: 45px; color: #d4af37; margin-bottom: 15px; }
.success_icon { color: #27ae60; }
.vip_modal_info_box { background: #222; border-radius: 12px; padding: 20px; border: 1px solid #333; margin: 15px 0; }
.vip_modal_info_box p { margin: 8px 0; font-size: 14px; color: #ccc; }
.vip_modal_info_box strong { color: #d4af37; }

.iban_item_card { background: #1a1a1a; border: 1px solid #333; border-radius: 10px; padding: 15px; margin-bottom: 12px; transition: 0.3s; text-align: left; }
.iban_item_card:hover { border-color: #d4af37; background: #222; }
.iban_item_header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; padding-bottom: 8px; margin-bottom: 10px; }
.i_bank { font-weight: 800; color: #d4af37; font-size: 14px; text-transform: uppercase; }
.i_firm { font-size: 11px; color: #888; background: #222; padding: 2px 8px; border-radius: 4px; }
.iban_item_body p { margin: 5px 0; font-size: 13px !important; color: #bbb !important; }
.iban_box_mini { background: #121212; padding: 8px 12px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; margin-top: 8px; border: 1px dashed #444; }
.iban_text { font-family: monospace; font-size: 13px !important; color: #fff !important; letter-spacing: 0.5px; }
.iban_box_mini button { background: none; border: none; color: #d4af37; cursor: pointer; font-size: 14px; padding: 0; }

.vip_modal_price_tag { font-size: 18px; font-weight: bold; margin: 20px 0; color: #fff; }
.vip_modal_price_tag span { color: #d4af37; font-size: 24px; }

.v_form_group { margin-bottom: 15px; text-align: left; }
.v_form_group label { display: block; font-size: 13px; color: #888; margin-bottom: 6px; }
.v_form_group input { width: 100%; background: #121212; border: 1px solid #333; padding: 12px; border-radius: 8px; color: #fff; font-size: 14px; outline: none; transition: 0.3s; box-sizing: border-box; }
.v_form_group input:focus { border-color: #d4af37; }
.v_form_group input[readonly] { background: #1a1a1a; color: #666; cursor: not-allowed; }

.file_upload_box { position: relative; }
.file_upload_box input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; opacity: 0; }
.file_upload_box label { display: block; background: #222; border: 2px dashed #444; padding: 15px; border-radius: 8px; text-align: center; cursor: pointer; color: #aaa; transition: 0.3s; }
.file_upload_box label:hover { border-color: #d4af37; color: #d4af37; }

.vip_modal_buttons { display: flex; gap: 12px; }
.vip_modal_btn { flex: 1; border: none; padding: 15px; border-radius: 10px; font-weight: bold; cursor: pointer; font-size: 14px; transition: 0.3s; }
.v_cancel { background: #333; color: #999; }
.v_confirm { background: #d4af37; color: #000; }
.v_confirm:hover { background: #b8941f; transform: scale(1.02); }