/* =========================================================
   ১. ফন্ট রেজিস্ট্রেশন ও গ্লোবাল ডার্ক মোড
============================================================ */
@font-face { font-family: 'HeaderFont'; src: url('mr4.ttf') format('truetype'); }
@font-face { font-family: 'BodyFont'; src: url('mr4.ttf') format('truetype'); }
@font-face { font-family: 'PriceFont'; src: url('mr4.ttf') format('truetype'); }
@font-face { font-family: 'ButtonFont'; src: url('mr4.ttf') format('truetype'); }

body { 
  margin: 0; 
  font-family: "BodyFont", sans-serif; 
  background-color: #0b0e11; 
  color: white; 
  overflow-x: hidden;
}

/* =========================================================
   ২. হেডার ডিজাইন
============================================================ */
header {
  background: linear-gradient(100deg, #1c2128,#0b0e11);
  padding: 10px 15px; 
  position: sticky; 
  top: 0; 
  z-index: 100; 
  border-bottom: 1px solid #095007;
  display: flex;
  align-items: center;
}

.logo-title-group { display: flex; align-items: center; gap: 70px; }
.header-logo { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
#headerTitle { font-family: 'HeaderFont', sans-serif; font-size: 18px; font-weight: bold; margin: 0; }

.settings-icon { 
  position: absolute; 
  right: 15px; 
  background: none; 
  border: none; 
  color: #00ff88; 
  font-size: 25px; 
  cursor: pointer; 
}

/* =========================================================
   ৩. ভিডিও এবং নোটিশ সেকশন
============================================================ */
.video-container { padding: 15px 20px 5px 20px; background: #0b0e11; }
.video-card { position: relative; width: 100%; padding-top: 56.25%; border-radius: 15px; overflow: hidden; border: 2px solid #7aff00; }
.video-card video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-label { text-align: center; font-size: 13px; color: #00ff88; margin-top: 8px; font-weight: bold; }

/* ধামাকা অফার নোটিশ */
#noticeContainer {
  margin: 10px 20px;
  background: linear-gradient(90deg, #ff0055, #ff9900);
  border-radius: 10px;
  border: 1px solid #fff;
}

/* =========================================================
   ৪. সিম কার্ড ডিজাইন
============================================================ */
.sim-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px; }
.sim-card {
  min-height: 150px; border-radius: 20px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px; overflow: hidden; transition: 0.3s; cursor: pointer;
}
.sim-card::after {
  content: ""; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px;
  background-color: #12171d; border-radius: 16px; z-index: 1;
}
.op-logo, .sim-name { position: relative; z-index: 2; }
.op-logo { width: 55px; height: 55px; background: white; border-radius: 50%; padding: 5px; margin-bottom: 8px; }
.sim-name { font-family: 'HeaderFont', sans-serif; font-weight: bold; font-size: 15px; }

/* সিম থিম কালার */
.gp-theme { background: linear-gradient(45deg, #0056b3, #ff001f); }
.robi-theme { background: linear-gradient(-45deg, #e21313, #f8ff00); }
.bl-theme { background: linear-gradient(45deg, #ff6600, #ff9f43); }
.airtel-theme { background: linear-gradient(45deg, #ed1c24, #ff5252); }
.teletalk-theme { background: linear-gradient(45deg, #28a745, #55efc4); }
.skitto-theme { background: linear-gradient(45deg, #ffd400, #ffeaa7); }

/* =========================================================
   ৫. অফার এবং বাটন ইফেক্ট
============================================================ */
.container { padding: 15px; }
.back-btn { background: linear-gradient(135deg, #ff416c, #ff4b2b); color: white; border: 1px solid #11ff00; padding: 8px 18px; border-radius: 50px; margin-bottom: 20px; cursor: pointer; }

.days-btn { display: flex; gap: 10px; margin-bottom: 25px; }
.days-btn button { flex: 1; padding: 12px; border-radius: 50px; border: 2px solid #fff100c7; font-weight: bold; color: white; background: linear-gradient(135deg, #11998e, #38ef7d); cursor: pointer; }

/* ঘূর্ণায়মান বর্ডারের মেইন ডিজাইন */
.offer-card {
    position: relative;
    background: #1c2128;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden; /* এনিমেশন বাইরে যাওয়া ঠেকাবে */
    z-index: 1;
}

/* এক সাইডের সেই সবুজ বর্ডারটি বজায় রাখা */
.offer-card {
    border-left: 5px solid #00ff88; 
}

/* চারদিকে ঘূর্ণায়মান বর্ডার তৈরির জন্য এনিমেশন */
.offer-card::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: conic-gradient(#00ff88, #ff00f1, transparent, transparent, #00ff88);
    animation: rotate 4s linear infinite;
    z-index: -2;
    top: -25%;
    left: -25%;
}

/* কার্ডের ভেতরের ব্যাকগ্রাউন্ড রক্ষা করা */
.offer-card::after {
    content: '';
    position: absolute;
    inset: 3px; /* বর্ডারের চিকন ভাব কন্ট্রোল করবে */
    background: #1c2128;
    border-radius: 13px;
    z-index: -1;
}

/* আপনার অরেঞ্জ বাটন স্টাইল */
.offer-card button {
    background: orange;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

/* ঘুরার এনিমেশন */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* =========================================================
   ৬. ভাসমান গাইড বাটন এবং এনিমেশন
============================================================ */
.guide-text-anim {
  font-size: 12px; color: white; background: rgba(0, 0, 0, 0.7);
  padding: 4px 10px; border-radius: 10px; margin-right: 8px; opacity: 0; animation: textFadeCycle 8s infinite;
}

@keyframes textFadeCycle {
  0% { opacity: 0; transform: translateX(10px); }
  10% { opacity: 1; transform: translateX(0); }
  60% { opacity: 1; transform: translateX(0); }
  70% { opacity: 0; transform: translateX(10px); }
  100% { opacity: 0; }
}

.guide-icon-btn { animation: pulseBtn 2s infinite; }
@keyframes pulseBtn {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}

/* =========================================================
   ৭. মডাল ডিজাইন (Settings, Order, Guide)
============================================================ */
.modal, .modal-overlay { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center; }
.modal-content, .order-modal-content { background: #1c2128; padding: 25px; border-radius: 25px; width: 85%; max-width: 320px; max-height: 85vh; overflow-y: auto; border: 1px solid #444; text-align: center; }

.hidden { display: none !important; }
/* সেটিংস মডালের হোম পেজ বাটনটিকে গোল এবং লাল করার কোড */
.close-btn {
  width: 85% !important; 
  max-width: 220px; 
  margin: 20px auto !important;
  display: block; 
  padding: 12px;
  background: linear-gradient(135deg, #171520 0%, #171520 100%) !important;
  color: #00ffff !important; 
  border: 2px solid #3bff00 !important;
  border-radius: 50px !important; /* বাটনটি গোল করার জন্য */
  font-weight: bold; 
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(255, 0, 85, 0.3); /* হালকা গ্লো ইফেক্ট */
  transition: 0.3s;
}

.close-btn:active {
  transform: scale(0.9); /* ক্লিক করলে হালকা ডেবে যাবে */
}


/* নোটিফিকেশন ডিজাইন ও এনিমেশন */
.smart-toast {
    position: fixed;
    top: -100px; /* শুরুতে স্ক্রিনের বাইরে থাকবে */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    border: 1px solid #00f2fe;
    box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 99999;
    transition: top 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-weight: bold;
}

/* যখন show ক্লাস যোগ হবে তখন নিচে নামবে */
.smart-toast.show {
    top: 30px;
}

/* ভুল হলে লাল বর্ডার */
.smart-toast.error {
    border-color: #ff4b2b;
    box-shadow: 0 5px 15px rgba(255, 75, 43, 0.4);
}


/* নোটিশ ওভারলে */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* হালকা কালো স্বচ্ছ */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* সবকিছুর উপরে থাকবে */
    backdrop-filter: blur(8px); /* ব্যাকগ্রাউন্ড ঝাপসা করবে */
}

/* নোটিশ কার্ড ডিজাইন */
/* নোটিশ কার্ড ডিজাইন - আপডেট করা */
.notice-card {
    background: #161b22;
    width: 85%;
    max-width: 350px;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid #00f2fe;
    text-align: center;
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.2);
    animation: slideIn 0.4s ease-out;

    /* লেখা অনেক বেশি হলে যেন স্ক্রিনের বাইরে না যায় */
    max-height: 80vh; /* স্ক্রিনের ৮০% পর্যন্ত বড় হবে */
    overflow-y: auto; /* লেখা আরও বেশি হলে বক্সের ভেতরেই স্ক্রল করা যাবে */
    display: flex;
    flex-direction: column;
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.notice-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.notice-title {
    color: #00f2fe;
    font-size: 20px;
    margin: 10px 0;
    font-weight: bold;
}

.notice-body p {
    color: #eeeeee;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* ক্লোজ বাটন - গ্লোয়িং ইফেক্ট */
.notice-close-btn {
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    color: #000;
    border: none;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 242, 254, 0.4);
    transition: 0.3s;
}

.notice-close-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px #00f2fe;
}


/* ফ্লোটিং ব্যাক বাটন স্টাইল */
.floating-back-wrapper {
    position: fixed;
    bottom: 300px; /* নিচ থেকে ৩০px উপরে */
    left: 20px;   /* বাম থেকে ২০px দূরে */
    z-index: 99999;
    touch-action: none; /* ড্র্যাগ করার জন্য জরুরি */
}

.back-btn-float {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ff0055 0%, #ff4b2b 100%);
    color: white;
    border: 2px solid white;
    border-radius: 50%; /* গোল বাটন */
    font-size: 20px;
    font-weight: bold;
    cursor: move; /* মাউস নিলে ড্র্যাগ আইকন দেখাবে */
    box-shadow: 0 4px 15px rgba(255, 0, 85, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}


/* =========================================
   🚀 উন্নত লোডার এবং এনিমেশন ডিজাইন (Fixed Center)
   ========================================= */

/* ১. মেইন কন্টেইনার */
.loader-container {
    position: relative;
    height: 350px; /* উচ্চতা অ্যাপ অনুযায়ী সেট করলাম */
    display: flex;
    justify-content: center; /* লোগোকে ডানে-বামে মাঝখানে আনবে */
    align-items: center;     /* লোগোকে উপরে-নিচে মাঝখানে আনবে */
    overflow: hidden;
}

/* ২. মাঝখানের ছবির ডিজাইন ও পালস এনিমেশন */
.main-loader-img {
    position: relative; /* একে সেন্টার পয়েন্ট হিসেবে ধরবে */
    width: 90px;
    height: 90px;
    z-index: 10;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ceff00ab;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.5);
    animation: imagePulse 1.5s infinite ease-in-out;
}

.main-loader-img img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

/* ছবির উজ্জ্বলতা ও বড়-ছোট হওয়ার ম্যাজিক */
@keyframes imagePulse {
    0% { transform: scale(0.8); filter: brightness(0.2) grayscale(0.5); }
    50% { transform: scale(1.1); filter: brightness(1.8) grayscale(0); }
    100% { transform: scale(0.8); filter: brightness(0.2) grayscale(0.5); }
}

/* ৩. গোল গোল আলোর রশ্মি (Ripple Rings) */
.ripple-ring {
    position: absolute; /* লোগোর ঠিক উপরে বা নিচে বসানোর জন্য */
    top: 50%; /* কন্টেইনারের মাঝখান */
    left: 50%; /* কন্টেইনারের মাঝখান */
    /* translate(-50%, -50%) না দিলে রেখাগুলো লোগোর মাঝখান থেকে বের হবে না */
    transform: translate(-50%, -50%); 
    width: 90px;
    height: 90px;
    border: 2px solid #00f2fe;
    border-radius: 50%;
    z-index: 1; /* লোগোর নিচে থাকবে */
    pointer-events: none;
    animation: rippleEffect 2.5s infinite cubic-bezier(0.2, 0, 0.2, 1);
    opacity: 0;
}

/* রিংগুলোর টাইমিং গ্যাপ */
.delay-1 { animation-delay: 0.8s; }
.delay-2 { animation-delay: 1.6s; }

/* আলোর রশ্মি ছড়িয়ে পড়ার ফিক্সড এনিমেশন */
@keyframes rippleEffect {
    0% { 
        /* শুরুতে লোগোর নিচে লুকিয়ে থাকবে */
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0; 
        border-color: #ff00f1;
    }
    20% { opacity: 0.6; }
    100% { 
        /* ফেটে বড় হওয়ার সময়ও সেন্টার পয়েন্টে থাকবে */
        transform: translate(-50%, -50%) scale(4.5); 
        opacity: 0; 
        border-color: #00f2fe;
    }
}

/* ৪. লোডিং টেক্সট ডিজাইন */
.loading-text {
    position: absolute;
    bottom: 20px; /* একদম নিচে রাখার জন্য */
    color: #00f2fe;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: textGlow 1.5s infinite ease-in-out;
}