/* ---------------------------------------------------------------------------------------------
* Copyright (c) 2025 Blinkr Team, Kore Org. All rights reserved.
* Licensed under the MIT License. See License(File) in the project root for license information.
*-----------------------------------------------------------------------------------------------*/
@import url("./blinkr-purp.css");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,800;1,800&display=swap');

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Outfit-Black';
  src: url('../fonts/Outfit-Black.ttf') format('truetype');
  font-weight: 900;
  text-transform: uppercase !important;
}

@font-face {
  font-family: 'Inter-Black';
  src: url('../fonts/static/Inter_28pt-Black.ttf') format('truetype');
  font-weight: 900;
  text-transform: uppercase !important;
}


@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("../fonts/MPLUSRounded1c-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("../fonts/MPLUSRounded1c-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("../fonts/MPLUSRounded1c-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("../fonts/MPLUSRounded1c-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("../fonts/MPLUSRounded1c-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("../fonts/MPLUSRounded1c-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("../fonts/MPLUSRounded1c-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "M PLUS Rounded 1c";
    src: url("../fonts/MPLUSRounded1c-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --progress-bg: #e2e8f0;
  --progress-fill-color: linear-gradient(45deg, #7201FE, #AB18ED);
  --progress-height: 12px;
  --progress-radius: 9999px;
  --text-color: #1e293b;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: calc(var(--extra-font-size) + 13px);
  color: var(--text-primary);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#toolbar {
  height: 96px;

}

.rest {
  flex: 1;
  height: 100%;
  width: 100%;
}

.play {
  content: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play-icon lucide-play"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>'';
}

.pause {
  content: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pause-icon lucide-pause"><rect x="14" y="3" width="5" height="18" rx="1"/><rect x="5" y="3" width="5" height="18" rx="1"/></svg>'
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  padding-bottom: 2px;
  padding-right: 5px;
  padding-left: 5px;
}

.rest .bk-list {
  padding: 15px 5px;
  width: 300px;
  border-radius: 20px;
  position: fixed;
  right: 0.67%;
  display: none;
}

.rest .downloads.bk-list .bk-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 7px;
}

.rest .downloads.bk-list .bk-list-item .right, .rest .downloads.bk-list .bk-list-item .left {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.rest .downloads.bk-list .bk-list-item p.file-name {
  font-size: 16px;
}

.progress-track {
  width: 100%;
  height: var(--progress-height);
  background-color: var(--progress-bg);
  border-radius: var(--progress-radius);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--progress-fill-color);
  border-radius: inherit;
  transition: width 100ms ease-out;
}

/* ── Title Bar ─────────────────────────────────────────────── */
.titlebar {
  height: 40px;
  background: var(--bg-titlebar);
  display: flex;
  align-items: center;
  user-select: none;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
  position: relative;
  z-index: 100;
  transition: background var(--transition);
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-app-region: drag;
  flex-shrink: 0;
}

.titlebar-drag {
  flex: 1;
  height: 100%;
  -webkit-app-region: drag;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 15%;
}

.titlebar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  -webkit-app-region: no-drag;
  flex-shrink: 0;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: 7px;
}

.logo-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.app-name {
  font-family: var(--font-brand);
  font-size: calc(var(--extra-font-size) + 11px);
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}

/* ── Theme Toggle ──────────────────────────────────────────── */
.theme-toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  position: relative;
}

.theme-toggle:hover {
  background: var(--btn-hover);
  color: var(--accent);
}

.theme-toggle .icon { position: absolute; top: 5px; transition: opacity 0.2s, transform 0.3s; }
.icon-moon { opacity: 1; transform: rotate(0deg); }
.icon-sun  { opacity: 0; transform: rotate(90deg); }

[data-theme="light"] .icon-moon { opacity: 0; transform: rotate(-90deg); }
[data-theme="light"] .icon-sun  { opacity: 1; transform: rotate(0deg); }

/* ── Window Controls ───────────────────────────────────────── */
.window-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.wc-btn {
  width: 30px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

.wc-btn svg { width: 12px; height: 12px; }
.wc-btn:hover { background: var(--btn-hover); color: var(--text-primary); }
.wc-close:hover { background: var(--close-hover) !important; color: #fff !important; }

/* ── Navigation Bar ────────────────────────────────────────── */
.navbar {
  height: 56px;
  background: var(--bg-navbar);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

/* ── Nav Buttons ───────────────────────────────────────────── */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.nav-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition), transform 0.12s;
}

.nav-btn svg { width: 18px; height: 18px; }
.nav-btn:hover:not(:disabled) { background: var(--btn-hover); color: var(--accent); }
.nav-btn:active:not(:disabled) { transform: scale(0.92); }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Reload / Stop icon swap */
.nav-btn .icon-stop { display: none; }
.nav-btn .icon-reload { display: block; }
body.loading .nav-btn .icon-stop { display: block; }
body.loading .nav-btn .icon-reload { display: none; }

/* Spin animation when loading */
body.loading .icon-stop { animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
body.loading #btnReload { animation: none; }

/* ── Address Bar ───────────────────────────────────────────── */
.address-bar-wrapper {
  flex: 1;
  min-width: 0;
  width:auto
}

.address-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-address);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 10px 0 8px;
  height: 36px;
  transition: background var(--transition), border-color var(--transition),
}

.address-bar:focus-within {
  background: var(--bg-address-focus);
  border-color: var(--border-focus);
}

.favicon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.favicon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* Default (mask mode) */
.favicon.default {
  background-color: currentColor;

  mask: url('../assets/images/default-favicon.svg') no-repeat center;
  -webkit-mask: url('../assets/images/default-favicon.svg') no-repeat center;

  mask-size: contain;
  -webkit-mask-size: contain;
}

/* Real favicon mode */
.favicon.image {
  background: none;
  mask: none;
  -webkit-mask: none;
  object-fit: contain;
}

.security-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  display: none; /* shown via JS based on https */
}

.security-icon.secure { color: #22c55e; display: flex; }
.security-icon.insecure { color: #f59e0b; display: flex; }

.security-icon svg { width: 12px; height: 12px; }

.url-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: calc(var(--extra-font-size) + 13px);
  font-family: var(--font-ui);
  color: var(--text-primary);
  caret-color: var(--accent);
  min-width: 0;
}

.url-input::placeholder { color: var(--text-muted); }
.url-input::selection { background: var(--accent-soft); }

/* ── Loading Spinner ───────────────────────────────────────── */
.loading-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
}

body.loading .loading-spinner { display: flex; }

.spinner-ring {
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}



/* ── Nav Extras ────────────────────────────────────────────── */
.nav-extras {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }

/* ── More Menu ────────────────────────────────────────────── */
.moreMenu {
  position: absolute;
  right: 12px;   /* 🔥 sticks to right */
  top: 114px;     /* below navbar (same as navbar height) */
}
.a {
color: #7201FE;
}