/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ===========================================
   NEUMORPHIC UI DESIGN SYSTEM (Standalone)
   =========================================== */

:root {
  --color-primary: #E4EBF1;       /* Background */
  --color-secondary: #4A5B68;     /* Headings */
  --color-text: #6E7F8D;          /* Body text */
  --color-accent: #5D6B78;        /* Accent tone */
  --color-surface-light: #FAFBFF; /* Light shadow */
  --color-surface-dark: #161B26;  /* Dark shadow */
  --color-muted: #73808E;         /* Muted text */

  /* Elementor variable mapping */
  --e-global-color-primary: var(--color-accent);
  --e-global-color-secondary: var(--color-secondary);
  --e-global-color-text: var(--color-text);
  --e-global-color-57fb135: var(--color-primary);
}

/* ==============================
   Reset
   ============================== */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

/* ==============================
   CARD
   ============================== */
.ui-card {
  background: var(--color-primary);
  border-radius: 16px;
  box-shadow: -4px -4px 8px var(--color-surface-light),
               4px 4px 8px var(--color-surface-dark);
  padding: 2rem;
  color: var(--color-text);
  font-family: "Rubik", sans-serif;
  transition: all 0.3s ease;
}

/* ==============================
   INPUT
   ============================== */
.ui-input {
  background: var(--color-primary);
  color: var(--color-text);
  border: none;
  border-radius: 16px;
  padding: 0.75rem 1rem;
  font-family: "Rubik", sans-serif;
  font-size: 1rem;
  box-shadow: inset -3px -3px 6px var(--color-surface-light),
              inset 3px 3px 6px var(--color-surface-dark);
  outline: none;
  transition: all 0.25s ease;
}
.ui-input:focus {
  box-shadow: inset -2px -2px 4px var(--color-surface-light),
              inset 2px 2px 4px var(--color-surface-dark),
              0 0 8px rgba(110,127,141,0.2);
}

/* ==============================
   BADGE
   ============================== */
.ui-badge {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-family: "Rubik", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  box-shadow: -2px -2px 4px var(--color-surface-light),
               2px 2px 4px var(--color-surface-dark);
  transition: all 0.25s ease;
}
.ui-badge:hover {
  filter: brightness(1.1);
}

/* ==============================
   BUTTONS
   ============================== */
.ui-btn,
.ui-btn .elementor-button {
  box-shadow: -4px -4px 8px var(--color-surface-light),
               4px 4px 8px var(--color-surface-dark);
  transition: all 0.25s ease;
}
.ui-btn:hover,
.ui-btn .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: -6px -6px 12px var(--color-surface-light),
               6px 6px 12px var(--color-surface-dark);
  background: #edf2f6;
}
.ui-btn:active,
.ui-btn .elementor-button:active {
  transform: translateY(1px);
  box-shadow: inset -4px -4px 8px var(--color-surface-light),
              inset 4px 4px 8px var(--color-surface-dark);
}

/* Primary Variant */
.ui-btn--primary,
.ui-btn--primary .elementor-button {
  background: var(--color-accent);
  color: #fff;
}

/* Ghost Variant */
.ui-btn--ghost,
.ui-btn--ghost .elementor-button {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  box-shadow: none;
  transition: all 0.3s ease;
}
.ui-btn--ghost:hover {
  background: rgba(110,127,141,0.08);
}

/* ==============================
   TYPOGRAPHY
   ============================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-secondary);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}
p, li, input, label {
  color: var(--color-text);
}
small, .text-muted {
  color: var(--color-muted);
}

/* Elementor Login Button */
.elementor-widget-login .elementor-button {
  box-shadow: -4px -4px 8px var(--color-surface-light),
               4px 4px 8px var(--color-surface-dark);
}
.elementor-widget-login .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: -6px -6px 12px var(--color-surface-light),
               6px 6px 12px var(--color-surface-dark);
  background: #edf2f6;
}
.elementor-widget-login .elementor-button:active {
  transform: translateY(1px);
  box-shadow: inset -4px -4px 8px var(--color-surface-light),
              inset 4px 4px 8px var(--color-surface-dark);
}

/* ======================================
   SECURE PLAYLIST (Containerized Layout)
   ====================================== */
.secure-playlist {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  background: var(--color-primary);
  box-shadow: -6px -6px 12px var(--color-surface-light),
               6px 6px 12px var(--color-surface-dark);
}

/* main video area (no extra card shadow) */
/* main video area (no extra card shadow) */
/* main video area — flat edge, no inset */
.secure-video-area {
  flex: 2;
  min-width: 400px;
  background: transparent;   /* or var(--color-primary) if you prefer */
  border-radius: 16px;
  padding: 0;                /* remove the frame spacing */
  box-shadow: none;          /* remove inset bevel */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;          /* ensures rounded corners clip the video */
}

.secure-video-area video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;          /* container handles rounding */
  object-fit: cover;
  box-shadow: none;          /* no inner shadow */
  transition: opacity 0.25s ease;
}

.secure-video-area video.loading {
  opacity: 0.5;
  pointer-events: none;
}


/* sidebar */
.secure-playlist-sidebar {
  flex: 1;
  min-width: 250px;
  background: var(--color-primary);
  border-radius: 20px;
  padding: 1rem;
  box-shadow: inset -3px -3px 6px var(--color-surface-light),
              inset 3px 3px 6px var(--color-surface-dark);
}
#secure-playlist-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.secure-playlist-item {
  display: block;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  font-weight: 500;
  color: var(--color-secondary);
  background: var(--color-primary);
  box-shadow: 3px 3px 6px rgba(0,0,0,0.12),
              -3px -3px 6px rgba(255,255,255,0.8);
  transition: all 0.2s ease-in-out;
}
.secure-playlist-item:hover {
  transform: translateY(-2px);
  color: var(--color-accent);
}
.secure-playlist-item.active {
  background: var(--color-accent);
  color: #fff;
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.25),
              inset -3px -3px 6px rgba(255,255,255,0.3);
}

@keyframes glowPulse {
  0%, 100% { box-shadow: inset 3px 3px 6px rgba(0,0,0,0.25),
                      inset -3px -3px 6px rgba(255,255,255,0.3),
                      0 0 0px rgba(93,107,120,0.0); }
  50% { box-shadow: inset 3px 3px 6px rgba(0,0,0,0.25),
                    inset -3px -3px 6px rgba(255,255,255,0.3),
                    0 0 10px rgba(93,107,120,0.45); }
}

.secure-playlist-item.active {
  background: var(--color-accent);
  color: #fff;
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.25),
              inset -3px -3px 6px rgba(255,255,255,0.3);
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* responsive */
@media (max-width: 768px) {
  .secure-playlist {
    flex-direction: column;
  }
}

/* ==============================
   Responsive Layout
   ============================== */
@media (max-width: 768px) {
  .secure-playlist {
    flex-direction: column;
    align-items: center;
  }

  .secure-video-area {
    width: 100%;
    min-width: auto;
    margin-bottom: 1rem;
    border-radius: 16px;
    box-shadow: none; /* keeps it clean on mobile */
  }

  .secure-playlist-sidebar {
    width: 100%;
    min-width: auto;
    padding: 1rem;
    box-shadow: inset -2px -2px 4px var(--color-surface-light),
                inset 2px 2px 4px var(--color-surface-dark);
  }

  .secure-playlist-item {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
  }
}