@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Hind Siliguri', sans-serif;
}

body {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          overflow-x: hidden;
          overflow-y: auto;
          color: #fff;
          padding: 20px 0;
          background-color: #000;
          /* Fallback */
          transition: background 1.5s ease-in-out;
          /* কালার বদলানোর স্মুথনেস */
          background-attachment: fixed;
}

/* Glassmorphism Card */
.calendar-card {
          width: 95%;
          max-width: 450px;
          background: rgba(255, 255, 255, 0.07);
          backdrop-filter: blur(25px) saturate(180%);
          -webkit-backdrop-filter: blur(25px) saturate(180%);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 30px;
          padding: 25px;
          text-align: center;
          z-index: 10;
          box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
          margin: 80px auto 100px;
}

.header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
}

.nav-btn {
          background: rgba(255, 255, 255, 0.15);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: white;
          width: 35px;
          height: 35px;
          border-radius: 50%;
          cursor: pointer;
}

.days-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 8px;
          margin-bottom: 25px;
}

.day-name {
          font-weight: 700;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.5);
}

.day {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          cursor: pointer;
          font-size: 14px;
          transition: 0.2s;
}

.day:hover {
          background: rgba(255, 255, 255, 0.1);
}

.today {
          background: #fff;
          color: #000;
          font-weight: bold;
          box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.has-event {
          border-bottom: 3px solid #00dbde;
}

.info-panel {
          margin-top: auto;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          padding-top: 15px;
}

#clock {
          font-size: 22px;
          color: #fff;
          font-weight: 700;
          margin-top: 5px;
}

#season-name {
          font-size: 14px;
          opacity: 0.8;
          margin-bottom: 5px;
}

/* Menus & Notifications */
.notification-banner {
          position: fixed;
          top: -120px;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(0, 0, 0, 0.8);
          backdrop-filter: blur(15px);
          padding: 12px 30px;
          border-radius: 50px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          z-index: 5000;
          transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          width: 90%;
          max-width: 380px;
          text-align: center;
}

.notification-banner.show {
          top: 25px;
}

.menu-icon {
          position: fixed;
          top: 15px;
          left: 20px;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(15px);
          padding: 10px 20px;
          border-radius: 50px;
          cursor: pointer;
          border: 1px solid rgba(255, 255, 255, 0.2);
          z-index: 100;
          font-size: 14px;
}

.side-menu {
          height: 100%;
          width: 0;
          position: fixed;
          z-index: 2000;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.9);
          backdrop-filter: blur(20px);
          overflow-x: hidden;
          transition: 0.5s;
          padding-top: 80px;
}

.side-menu h3 {
          padding: 0 25px;
          color: #ffd700;
          margin-bottom: 20px;
}

.side-menu ul {
          list-style: none;
          padding: 0 25px;
}

.side-menu li {
          margin-bottom: 10px;
          font-size: 14px;
          color: #eee;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          padding-bottom: 5px;
}

.music-controls {
          position: fixed;
          bottom: 20px;
          right: 20px;
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 18px;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(15px);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 50px;
          z-index: 1000;
}

#volume-slider {
          width: 70px;
          accent-color: #fff;
}

.modal {
          display: none;
          position: fixed;
          z-index: 3000;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.7);
          backdrop-filter: blur(8px);
          align-items: center;
          justify-content: center;
}

.modal-content {
          background: rgba(30, 30, 30, 0.9);
          padding: 30px;
          border-radius: 25px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          width: 90%;
          max-width: 340px;
          text-align: center;
}

#event-input {
          width: 100%;
          padding: 10px;
          margin: 15px 0;
          border-radius: 10px;
          border: none;
          background: rgba(255, 255, 255, 0.1);
          color: white;
}

.save-btn {
          background: #fff;
          color: #000;
          border: none;
          padding: 10px 20px;
          border-radius: 10px;
          cursor: pointer;
          font-weight: bold;
}

@media (max-width: 600px) {
          .calendar-card {
                    margin-top: 70px;
                    padding: 15px;
          }

          .day {
                    height: 35px;
                    font-size: 13px;
          }
}
/* ১. ব্যাকগ্রাউন্ডে অ্যানিমেটেড শেপ যোগ করা */
body::before,
body::after {
          content: "";
          position: fixed;
          width: 300px;
          height: 300px;
          border-radius: 50%;
          filter: blur(80px);
          z-index: -1;
          animation: move 20s infinite alternate;
}

body::before {
          background: rgba(0, 219, 222, 0.3);
          /* সায়ান রঙ */
          top: 10%;
          left: 10%;
}

body::after {
          background: rgba(252, 0, 255, 0.3);
          /* পার্পল রঙ */
          bottom: 10%;
          right: 10%;
          animation-delay: -5s;
}

@keyframes move {
          from {
                    transform: translate(0, 0);
          }

          to {
                    transform: translate(100px, 100px);
          }
}

/* ২. ক্যালেন্ডার কার্ডে আসল গ্লাসি লুক */
.calendar-card {
          width: 95%;
          max-width: 450px;
          background: rgba(255, 255, 255, 0.05);
          /* হালকা সাদাটে ভাব */
          backdrop-filter: blur(25px) saturate(180%);
          -webkit-backdrop-filter: blur(25px) saturate(180%);

          /* বর্ডার গ্লো ইফেক্ট */
          border: 1px solid rgba(255, 255, 255, 0.18);
          border-radius: 30px;

          padding: 25px;
          box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* ৩. গ্লাসের ওপর হালকা নয়েজ বা শ্যাডো */
.calendar-card::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border-radius: 30px;
          background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
          /* খুব হালকা টেক্সচার */
          opacity: 0.03;
          pointer-events: none;
}
/* ৯. মিউজিক কন্ট্রোল (Premium Glassy Look) */
.music-controls {
          position: fixed;
          bottom: 20px;
          right: 20px;
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 12px 15px;

          /* গ্লাসি ইফেক্টের মূল অংশ */
          background: rgba(255, 255, 255, 0.08);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: blur(20px) saturate(180%);

          /* বর্ডার এবং শ্যাডো যা গ্লাসি ভাব ফুটিয়ে তোলে */
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 50px;
          box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4),
                    inset 0 0 10px rgba(255, 255, 255, 0.05);

          z-index: 1000;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* মাউস নিলে গ্লো করবে এবং একটু বড় হবে */
.music-controls:hover {
          background: rgba(255, 255, 255, 0.15);
          border: 1px solid rgba(255, 255, 255, 0.3);
          transform: translateY(-5px) scale(1.02);
          box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
}

#mute-btn {
          background: none;
          border: none;
          color: white;
          cursor: pointer;
          display: flex;
          align-items: center;
          padding: 0;
          transition: transform 0.2s ease;
}

#mute-btn .material-symbols-outlined {
          font-size: 26px;
          color: rgba(255, 255, 255, 0.9);
          /* আইকনে হালকা রিফ্লেকশন */
          filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

#volume-slider {
          width: 80px;
          height: 5px;
          cursor: pointer;
          accent-color: #ffffff;
          /* স্লাইডারের হ্যান্ডেল সাদা */
          background: rgba(255, 255, 255, 0.2);
          border-radius: 10px;
          outline: none;
          appearance: none;
          -webkit-appearance: none;
}

/* স্লাইডারের হ্যান্ডেল কাস্টমাইজেশন (Chrome/Safari) */
#volume-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          height: 10px;
          width: 10px;
          border-radius: 40%;
          background: #fff;
          box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
          cursor: pointer;
}

/* মোবাইলের জন্য অপ্টিমাইজেশন */
@media (max-width: 600px) {
          .music-controls {
                    padding: 10px 15px;
                    bottom: 20px;
                    right: 15px;
          }

          #volume-slider {
                    width: 60px;
          }
}

/* স্লাইড মেনুর ক্লোজ বাটন ঠিক করা */
.side-menu .closebtn {
          position: absolute;
          top: 25px;
          /* উপর থেকে একটু নিচে নামানো হলো */
          right: 25px;
          /* কোণা থেকে একটু সরিয়ে আনা হলো */
          color: #fff;
          text-decoration: none;
          background: rgba(255, 255, 255, 0.1);
          /* হালকা গ্লাসি ব্যাকগ্রাউন্ড */
          width: 45px;
          /* ক্লিক করার জায়গা বাড়ানো হলো */
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          /* গোল বাটন */
          border: 1px solid rgba(255, 255, 255, 0.2);
          transition: 0.3s ease;
          z-index: 2001;
}

.side-menu .closebtn:hover {
          background: rgba(255, 0, 0, 0.4);
          /* হোভার করলে লালচে ভাব আসবে */
          transform: rotate(90deg);
          /* একটু ঘুরবে যা দেখতে সুন্দর লাগে */
}

.side-menu .closebtn .material-symbols-outlined {
          font-size: 28px;
          /* আইকনটি বড় করা হলো */
}

.side-menu {
          height: 100%;
          width: 0;
          position: fixed;
          z-index: 2000;
          top: 0;
          left: 0;
          background: rgba(15, 15, 15, 0.7);
          /* স্বচ্ছ ডার্ক লুক */
          backdrop-filter: blur(25px);
          /* ঝাপসা ইফেক্ট */
          -webkit-backdrop-filter: blur(25px);
          overflow-x: hidden;
          transition: 0.5s;
          padding-top: 100px;
          border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.side-menu {
          transition: 0.5s ease;
          /* এটি মেনু খোলা এবং বন্ধ হওয়াকে স্মুথ করবে */
}




/* বারের নাম (রবি, সোম...) */
.day-name {
          font-weight: 700;
          font-size: 14px;
          /* একটু বড় করা হলো */
          color: rgba(255, 255, 255, 0.9);
          /* স্বচ্ছতা কমিয়ে প্রায় সাদা করা হলো */
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
          /* লেখার পেছনে হালকা ছায়া যাতে পরিষ্কার বোঝা যায় */
          padding-bottom: 10px;
}

/* তারিখগুলো (1, 2, 3...) */
.day {
          /* নতুন ফন্ট সেট করা */
          font-family: 'Noto Sans Bengali', sans-serif !important;

          height: 45px;
          /* উচ্চতা কিছুটা বাড়ানো হলো */
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          /* ১ তারিখ যেন স্পষ্ট হয় */
          font-weight: 600;
          color: #ffffff;

          /* লেখা কেটে যাওয়া রোধ করতে */
          overflow: visible !important;
          line-height: 1;

          /* টেক্সট যাতে একদম মাঝে থাকে */
          padding-top: 2px;

          transition: 0.2s;
          cursor: pointer;
          position: relative;
          z-index: 10;
}
/* আজ বা টুডে হাইলাইট */
.today {
          background: #ffffff !important;
          color: #000000 !important;
          font-weight: 800;
          box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
          text-shadow: none;
          /* আজ-এর ওপর শ্যাডো দরকার নেই */
}

.calendar-card {
          /* আগের চেয়ে সামান্য বেশি ডার্ক করা হয়েছে যাতে সাদা লেখা ফুটে ওঠে */
          background: rgba(0, 0, 0, 0.25);
          backdrop-filter: blur(20px) saturate(160%);
          -webkit-backdrop-filter: blur(20px) saturate(160%);
          border: 1px solid rgba(255, 255, 255, 0.25);
          /* বাকি সব একই থাকবে */
}#month-year {
          font-size: 24px;
          font-weight: 700;
          color: #ffffff;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#clock {
          font-size: 26px;
          color: #ffffff;
          /* সায়ান থেকে সাদা করলে গ্লাসে বেশি ভালো দেখায় */
          font-weight: 700;
          text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

#season-name {
          font-size: 16px;
          font-weight: 700;
          color: #fff;
          background: rgba(0, 0, 0, 0.3);
          /* লেখার নিচে হালকা কালো আস্তরণ */
          display: inline-block;
          padding: 5px 15px;
          border-radius: 50px;
          margin-bottom: 10px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#weather-info {
          font-size: 14px;
          background: rgba(255, 255, 255, 0.1);
          padding: 8px;
          border-radius: 12px;
          margin-bottom: 10px;
          color: #fff;
          font-weight: 500;
}

.info-panel div {
          text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8),
                    -1px -1px 0 rgba(0, 0, 0, 0.5);
}




/* ক্যালেন্ডার কার্ডের মূল সংশোধন */
.calendar-card {
          width: 95%;
          max-width: 450px;
          background: rgba(0, 0, 0, 0.25);
          backdrop-filter: blur(25px) saturate(180%);
          -webkit-backdrop-filter: blur(25px) saturate(180%);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 30px;
          padding: 25px;
          text-align: center;
          z-index: 10;
          box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
          margin: 80px auto 100px;
          /* ফিক্সড হাইট বাদ দিয়ে অটো রাখা হয়েছে */
          height: auto;
          min-height: min-content;
          display: flex;
          flex-direction: column;
}

.days-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 8px;
          margin-bottom: 20px;
          /* গ্রিড কন্টেইনার যাতে ভেঙে না যায় */
          align-content: start;
}

/* মোবাইল ভিউর জন্য বিশেষ অপ্টিমাইজেশন */
@media (max-width: 600px) {
          .calendar-card {
                    margin-top: 70px;
                    margin-bottom: 120px;
                    /* নিচের মিউজিক কন্ট্রোলের জন্য জায়গা */
                    padding: 15px;
                    width: 92%;
          }

          .days-grid {
                    gap: 4px;
                    /* গ্যাপ কমানো হয়েছে যাতে ৩১ তারিখ ধরানো যায় */
          }

          .day {
                    height: 38px;
                    /* তারিখের বক্সের উচ্চতা কিছুটা কমানো */
                    font-size: 14px;
          }

          #clock {
                    font-size: 22px;
          }

          .info-panel {
                    padding-top: 10px;
                    margin-top: 10px;
          }
}

/* এটি আপনার লেআউটকে কখনো ভাঙতে দেবে না */
.calendar-card {
          display: flex !important;
          flex-direction: column !important;
          height: auto !important;
          min-height: 500px !important;
          /* একটি সেফ হাইট */
          overflow: hidden;
}

.days-grid {
          display: grid !important;
          grid-template-rows: auto !important;
          /* সারি অনুযায়ী জায়গা নেবে */
          margin-bottom: 20px !important;
}

.info-panel {
          margin-top: auto !important;
          /* তারিখের গ্রিড শেষ হলেই এটি শুরু হবে */
          padding: 15px 0;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/* মিউজিক বাটন যেন তারিখের ওপর না ওঠে তার সমাধান */
@media (max-width: 600px) {

          /* ক্যালেন্ডার কার্ডের নিচে পর্যাপ্ত জায়গা রাখা */
          .calendar-card {
                    margin-bottom: 180px !important;
                    /* এখানে গ্যাপ আরও বাড়ানো হলো */
                    position: relative;
                    z-index: 1;
          }

          /* মিউজিক কন্ট্রোলকে একটু ছোট এবং নিচে নামানো */
          .music-controls {
                    bottom: 10px !important;
                    right: 10px !important;
                    transform: scale(0.9);
                    /* মোবাইল স্ক্রিনে বাটনটি সামান্য ছোট করবে */
                    z-index: 2000 !important;
                    background: rgba(0, 0, 0, 0.5) !important;
                    /* হালকা কালো ব্যাকগ্রাউন্ড যাতে লেখা বোঝা যায় */
          }

          /* তারিখের গ্রিড এবং ইনফো প্যানেলের দূরত্ব বাড়ানো */
          .info-panel {
                    margin-top: 25px !important;
                    padding-bottom: 10px !important;
          }
}

/* ক্যালেন্ডার গ্রিড ঠিক করা */
.days-grid {
          display: grid !important;
          gap: 5px !important;
          margin-bottom: 20px !important;
}





/* ক্যালেন্ডার কার্ডকে ফিক্সড করার জন্য মেইন স্টাইল */
.calendar-card {
          position: relative;
          /* অথবা fixed ব্যবহার করা যেতে পারে */
          width: 95%;
          max-width: 450px;
          height: 580px;
          /* একটি ফিক্সড হাইট দিন যাতে তারিখ বাড়লেও কার্ড না বাড়ে */
          margin: 20px auto;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          /* এলিমেন্টগুলোকে ওপর-নিচে সমান দূরত্বে রাখবে */
          overflow: hidden;
          /* ভেতরের কিছু বাইরে বের হতে দেবে না */
}

/* তারিখের গ্রিড ফিক্সড রাখা */
.days-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 5px;
          flex-grow: 1;
          /* খালি জায়গা থাকলে গ্রিড সেটা দখল করবে */
}

/* মোবাইল ভিউর জন্য বিশেষ ফিক্স */
@media (max-width: 600px) {
          body {
                    overflow: hidden;
                    /* পুরো পেজ যাতে স্ক্রল না হয় */
                    touch-action: none;
                    /* জুম বা স্ক্রল আটকাবে */
          }

          .calendar-card {
                    position: fixed;
                    /* কার্ডকে স্ক্রিনের সাথে আটকে দেবে */
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    /* একদম সেন্টারে রাখবে */
                    height: 85vh;
                    /* স্ক্রিনের ৮৫% জায়গা নেবে, এর বেশি বড় হবে না */
                    margin: 0;
                    padding: 15px;
          }

          .day {
                    height: 35px;
                    /* তারিখের বক্স ছোট করা হলো যাতে সব আটে */
                    font-size: 13px;
          }

          .music-controls {
                    position: fixed;
                    bottom: 10px;
                    right: 10px;
                    width: auto;
                    z-index: 9999;
          }
}