/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1762405204
Updated: 2025-11-06 05:00:04

*/

/* .main-container {
    background: linear-gradient(#D2A9FF, #ED61AB);
    padding: 10px;
    border-radius: 46px;
    background-image: url('./gradientBG.png');
    background-size: 100% 100%;
    background-repeat: no-repeat
} */

/* .main-box {
    background: linear-gradient(135deg, #5C2E91 0%, #4a2580 100%);
    border-radius: 46px;
    padding: 40px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 2px solid #7a4ba8;
} */

/* sticker-scroll styles */
.sticker-scroll {
  position: relative;
  width: 100%;
  overflow: visible; /* inner scroll only */
  --track-height: 12px; /* UPDATED HEIGHT */
  --thumb-min-width: 36px;
  margin: 0;
  padding-bottom: 22px; /* more room for track */
}

.sticker-scroll-inner {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-bottom: 6px;
}

/* Hide native scrollbars (Chrome & Firefox) */
.sticker-scroll-inner::-webkit-scrollbar { display: none; }
.sticker-scroll-inner { scrollbar-width: none; }

/* Images inside scroll */
.sticker-scroll-inner img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100px;
  height: auto;
  width: auto;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

/* TRACK = GREY */
.sticker-scroll-track {
  position: absolute;
  left: 6px;
  right: 6px;
  height: var(--track-height);
  bottom: 6px;
  border-radius: 6px; 
  background: #C8C8C8;   /* UPDATED COLOR */
  opacity: 0.9;
  transition: opacity 250ms ease;
  z-index: 10;
  pointer-events: none;
}

/* THUMB = WHITE */
.sticker-scroll-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--track-height);
  border-radius: 6px;
  background: #FFFFFF;  /* UPDATED COLOR */
  min-width: var(--thumb-min-width);
  transform: translateX(0);
  will-change: transform, width;
  pointer-events: auto;
  box-shadow: 0 0 6px rgba(0,0,0,0.15); /* subtle outline so white thumb stays visible */
}

/* Visual states */
.sticker-scroll-inner.dragging { cursor: grabbing; }
.sticker-scroll-thumb.dragging { 
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Keyboard focus */
.sticker-scroll:focus,
.sticker-scroll-inner:focus { outline: none; }